CORS-Richtlinie in AJAX-Anfragen in JavaScript

Über AJAX kann man nicht einfach so Anfragen an andere Websites stellen (cross-origin requests). Solche Anfragen unterliegen der Richtlinie CORS. Kurz gesagt, nach dieser Richtlinie muss die Website, an die Sie die Anfrage richten, einwilligen, diese zu beantworten. Dazu muss sie entsprechende HTTP-Header senden.

Lassen Sie es uns praktisch ausprobieren. Starten wir zwei Testserver auf verschiedenen Ports. Den ersten auf 3001 und den zweiten auf 3002. Versuchen wir, eine AJAX-Anfrage von der zweiten Website an die erste zu senden.

Nehmen wir an, die erste Website ist bereit, folgende Anfragen entgegenzunehmen:

export default {
	'/handler/': function({ body }) {
		console.log(body);
		return 'success';
	}
}

Senden wir von der zweiten Website eine Anfrage an die erste:

button.addEventListener('click', function() {
	let promise = fetch('http://localhost:3001/handler/', {
		method: 'post',
		body: JSON.stringify([1, 2, 3, 4, 5]),
		headers: {
			'Content-Type': 'application/json',
		},
	});
});

Infolgedessen wird die Anfrage nicht ausgeführt, und in der Browserkonsole sehen wir einen Fehler, der mit der CORS-Richtlinie zusammenhängt.

Damit die Anfrage ausgeführt wird, muss der erste Server spezielle HTTP-Header senden. Geben wir diese an - und die Anfrage von der zweiten Website wird beginnt, an die erste durchzugehen:

export default {
	'/handler/': function({ body, resp }) {
		resp.setHeader('Access-Control-Allow-Origin', '*');
		resp.setHeader('Access-Control-Allow-Headers', '*');
		
		console.log(body);
		return 'success';
	}
}