XMLHttpRequest i "Same Origin Policy"

0

Kod JS:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){if (this.readyState == 4 && this.status == 200) {/*Operacje na zmiennej: xhttp.responseText;*/}};
xhttp.open("GET", "https://pl.wikipedia.org/w/index.php?action=raw&ctype=text/javascript&title=MediaWiki%3AGadget-gConfig.js", true);
xhttp.send();

Uzyskano komunikat:

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „https://pl.wikipedia.org/w/load.php?lang=pl&modules=ext.gadget.gConfig” (brakujący nagłówek CORS „Access-Control-Allow-Origin”). Kod stanu: 200.

Jak naprawić ten problem, by go nie było.

1

To są takie podstawy podstaw tego jak działa przeglądarka, zanim przeglądarka wyśle zapytanie do serwera, wysyła najpierw preflight zapytanie i dostaje w odpowiedzi nagłówek Access-Control-Allow-Origin sprawdza czy ty akurat znajdujesz się na tej domenie, która jest tam podana lub jest * dla wszystkich i jak nie ma to nie zezwala na zapytanie.

Gdyby zezwoliła, a automatycznie dodawane są credentialsy to mógłbyś w ramach innego użytkownika wykonać jakieś działania na stronie.

Żeby to objeść, to skorzystaj z czegoś innego niż przeglądarki np. curl w konsoli lub pythona.

Albo jako serwer zwracaj nagłówek do clientów Access-Control-Allow-Origin: * wtedy każdy będzie mógł serwer odpytywać.

0
Wypierdzistyy napisał(a):

To są takie podstawy podstaw tego jak działa przeglądarka, zanim przeglądarka wyśle zapytanie do serwera, wysyła najpierw preflight zapytanie i dostaje w odpowiedzi nagłówek Access-Control-Allow-Origin sprawdza czy ty akurat znajdujesz się na tej domenie, która jest tam podana lub jest * dla wszystkich i jak nie ma to nie zezwala na zapytanie.

Gdyby zezwoliła, a automatycznie dodawane są credentialsy to mógłbyś w ramach innego użytkownika wykonać jakieś działania na stronie.

Żeby to objeść, to skorzystaj z czegoś innego niż przeglądarki np. curl w konsoli lub pythona.

Albo jako serwer zwracaj nagłówek do clientów Access-Control-Allow-Origin: * wtedy każdy będzie mógł serwer odpytywać.

Jak użyłem w $.ajax:

$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

parametr dataType: "script", to ten błąd przestał się pojawiać, może da się to naprawić w: XMLHttpRequest, ale jak?

1

Dlaczego chcesz ściągać jakiś skrypt z wikipedii? jeżeli to jest jakiś widżet po prostu wpakuj go w tag <script>

Treści nie ściągniesz do odczytu, możesz wysłać request i on doleci, ale nigdy nie będziesz w stanie odczytać odpowiedzi, jeżeli nie będzie Access-Control-Allow-Origin na stronie wikipedii taki jak chcesz.

W twoim przykładzie z $.ajax nie masz już wikipedii tylko swoją własną stronę, więc wtedy błędu nie ma, ale to nie jest "wina" XMLHttpRequest

0
dzek69 napisał(a):

Dlaczego chcesz ściągać jakiś skrypt z wikipedii? jeżeli to jest jakiś widżet po prostu wpakuj go w tag <script>

Treści nie ściągniesz do odczytu, możesz wysłać request i on doleci, ale nigdy nie będziesz w stanie odczytać odpowiedzi, jeżeli nie będzie Access-Control-Allow-Origin na stronie wikipedii taki jak chcesz.

W twoim przykładzie z $.ajax nie masz już wikipedii tylko swoją własną stronę, więc wtedy błędu nie ma, ale to nie jest "wina" XMLHttpRequest

A przecież jakoś zaimplementowano $.ajax? Dla strony Wikipedii ten błąd znika, gdy weżniemy też dataType: script w tej wspomnianej ostatnio funkcji. Bo przecież strony JavaScript i CSS można ściągać z jednego projektu na drugi!

0

$.ajax z datatype script robi coś takiego

const url = "https://pl.wikipedia.org/w/index.php?action=raw&ctype=text/javascript&title=MediaWiki%3AGadget-gConfig.js";
const script = document.createElement("script");
script.src = url;

document.head.insertBefore(script, document.head.firstChild);

Co jest równoznaczne z tym jakbyś sam to wkleił do <head>.

Nadal nie masz sposobu na odczytanie treści. Więc jak Ci nie zależy na tym to po prostu wstaw:

<script src="https://pl.wikipedia.org/w/index.php?action=raw&ctype=text/javascript&title=MediaWiki%3AGadget-gConfig.js"></script> do <head> i tyle.

0
dzek69 napisał(a):

$.ajax z datatype script robi coś takiego

const url = "https://pl.wikipedia.org/w/index.php?action=raw&ctype=text/javascript&title=MediaWiki%3AGadget-gConfig.js";
const script = document.createElement("script");
script.src = url;

document.head.insertBefore(script, document.head.firstChild);

Co jest równoznaczne z tym jakbyś sam to wkleił do <head>.

Nadal nie masz sposobu na odczytanie treści. Więc jak Ci nie zależy na tym to po prostu wstaw:

<script src="https://pl.wikipedia.org/w/index.php?action=raw&ctype=text/javascript&title=MediaWiki%3AGadget-gConfig.js"></script> do <head> i tyle.

A co w przypadku serwerów proxy CORS? A dlaczego za pomocą znacznika: script, możemy pobrać skrypty JS, i link, arkusze CSS z Wikipedii na inny projekt MediaWiki, a za pomocą normalnej funkcji: XMLHttpRequest i jego metod, tego nie można, co jest tutaj grane?

0

A co w przypadku serwerów proxy CORS? A dlaczego za pomocą znacznika: script, możemy pobrać skrypty JS, i link, arkusze CSS z Wikipedii na inny projekt MediaWiki, a za pomocą normalnej funkcji: XMLHttpRequest i jego metod, tego nie można, co jest tutaj grane?

Pierwszy wynik wyszukiwania w googlach:
https://stackoverflow.com/questions/41069330/with-script-crossorigin-anonymous-why-is-a-script-blocked-by-cors-policy

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto