CORS-Richtlinienkonfiguration mit React

Unterstützung
1

Ich möchte über React auf die Discourse-API zugreifen.

Ich erhalte folgenden Fehler:

localhost/:1 Der Zugriff auf XMLHttpRequest an 'https://community.oppkey.host/posts.json' von der Herkunft 'http://localhost:3000' wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein 'Access-Control-Allow-Origin'-Header vorhanden.

image
image640×112 19 KB

Das sind meine CORS-Herkunftseinstellungen im Discourse-Admin-Panel.

image
image334×315 13.5 KB

Auf dem Discourse-Server habe ich Folgendes in /var/discourse/containers/app.yml stehen:

image
image453×146 6.82 KB

So versuche ich, auf die Discourse-API zuzugreifen:

export const DiscoursePanel = () => {
    const [ allData, updateData ] = useState([]);
	
	useEffect(() => {
         const apiEndPoint = 'https://community.oppkey.host/posts.json';
         /* const apiEndPoint = 'https://jsonplaceholder.typicode.com/posts'; */
        console.log("Versuche, die API unter " + apiEndPoint + " abzurufen");
		axios
        .get(apiEndPoint)
		.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("API abgerufen");
            console.log(currentData);
		})
		.catch((err) => console.log(err));
    }, []);

Wenn ich einen externen Server mit Fake-Daten verwende, funktioniert der React-Code.

image
image453×285 24.4 KB

Ich verstehe im Allgemeinen nicht, wie CORS und React funktionieren, daher wäre jede Hilfe willkommen.

Ich habe bereits eine Lösung mit einem API-Proxy-Server, den ich geschrieben habe, um API-Aufrufe von meinem Discourse-Server an einen anderen REST-API-Server weiterzuleiten, über den ich React verbinde. Obwohl das funktioniert, ist es langsam. Ich möchte API-Aufrufe direkt von React an die Discourse-API-Endpunkte senden.

image

2

Hallo @codetricity

Entschuldige, dass du keine Antwort auf diesen Beitrag gefunden hast. Ich verwende React fetch und habe ähnliche Schritte wie die von dir oben erwähnten unternommen, aber es wird immer noch mit „CORS-Richtlinie blockiert“ abgebrochen.

Hast du eine Lösung für dieses Problem oder eine Ressource gefunden, die die Lösung erklärt? Danke!

3

Hallo, ich kann mich nicht erinnern, was ich am Ende getan habe. Ich habe gerade nachgesehen und die React-Website wird immer noch mit Daten von Discourse (auf einem separaten Server) angezeigt.

Da die Verwendung von React mit Discourse üblich ist, denke ich, dass jemand anderes sie beantworten kann. Es tut mir leid, dass ich mich nicht an die Lösung erinnern kann. Viel Glück.

4

Hallo
Danke für die schnelle Antwort! :slight_smile:

Wenn Sie eine Minute Zeit und Zugriff auf denselben Code haben, könnten Sie bitte prüfen, ob zusätzliche Header hinzugefügt wurden? (ohne die sensiblen Informationen selbst…)

Dort steht über dem „Kein 'Access-Control-Allow-Origin'-Header vorhanden“, dass zusätzliche Header hätten hinzugefügt werden sollen?

Vielen Dank im Voraus! :smiley: