it-swarm-eu.dev

Proč můj JavaScript dostat "No" Access-Control-Allow-Origin 'záhlaví je přítomen na požadovaný zdroj "chyba, když Postman nemá?

Snažím se o autorizaci pomocí JavaScriptu připojením RESTfulAPI vestavěné Baňky . Když však zadám požadavek, zobrazí se následující chyba:

XMLHttpRequest nemůže načíst http: // myApiUrl/login . V požadovaném zdroji není k dispozici záhlaví 'Access-Control-Allow-Origin'. Původ 'null' není tedy povolen.

Vím, že rozhraní API nebo vzdálený zdroj musí nastavit záhlaví, ale proč to fungovalo, když jsem požadavek zadal prostřednictvím rozšíření Chrome Postman ?

Toto je kód požadavku:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });
2059
Mr Jedi

Pokud jsem pochopil, že je to správné, děláte XMLHttpRequest do jiné domény než je vaše stránka. Prohlížeč tak blokuje, protože z bezpečnostních důvodů obvykle umožňuje požadavek ve stejném původu. Je třeba udělat něco jiného, ​​pokud chcete provést požadavek na doménu. Tutoriál o tom, jak toho dosáhnout, je Použití CORS.

Pokud používáte poštovního doručovatele, nejsou tyto zásady omezeny. Citováno z Cross-Origin XMLHttpRequest:

Běžné webové stránky mohou pomocí objektu XMLHttpRequest odesílat a přijímat data ze vzdálených serverů, ale jsou omezeny stejnou zásadou původu. Rozšíření nejsou tak omezená. Rozšíření může hovořit se vzdálenými servery mimo jeho původ, pokud nejprve žádá o oprávnění ke vzniku původu.

1124

Nejedná se o opravu pro výrobu, nebo když má být aplikace zobrazena klientovi, je to užitečné pouze tehdy, když jsou UI a Backend development na různých serverech serverech a ve výrobě jsou vlastně na stejném serveru. Například: Při vývoji uživatelského rozhraní pro libovolnou aplikaci, pokud je třeba otestovat ji lokálně na server backend, v tomto scénáři se jedná o perfektní opravu. Pro opravu výroby musí být záhlaví CORS přidáno do backendového serveru, aby bylo umožněno přístup ke zdroji.

Snadný způsob je jen přidat rozšíření v Google chrome, aby byl umožněn přístup pomocí CORS.

( https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=cs )

Toto rozšíření povolte vždy, když chcete povolit přístup k požadavku záhlaví no'access-control-allow-Origin'.

Nebo 

V systému Windows vložte tento příkaz do okna run 

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

otevře se nový prohlížeč chrome, který umožní přístup k požadavku záhlaví no'access-control-allow-Origin'.

485
shruti

Pokud se můžete vypořádat s JSON in return, zkuste použít JSONP (na konci si všimněte P] pro mluvení mezi doménami:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Další informace o práci s aplikací JSONP zde :

Příchod JSONPu - v podstatě konsenzuálního skriptového hacku - otevřel dveře silným mashupům obsahu. Mnoho významných stránek poskytuje služby JSONP, což umožňuje přístup k jejich obsahu prostřednictvím předdefinovaného rozhraní API.

322
Gavin

Je to velmi jednoduché vyřešit, pokud používáte PHP . Stačí přidat následující skript na začátek stránky PHP, která zpracovává požadavek:

<?php header('Access-Control-Allow-Origin: *'); ?>

Upozornění: Toto obsahuje bezpečnostní problém pro váš soubor PHP, který by jej mohli zavolat útočníci. musíte použít relace a cookies pro ověření, abyste zabránili vašemu souboru/službě proti tomuto útoku. Vaše služba je ohrožena křížovým požadavkem na padělání (CSRF).

Pokud používáte Node-red musíte povolit CORS v souboru node-red/settings.js zrušením komentování následujících řádků:

// The following property can be used to configure cross-Origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 Origin: "*",
 methods: "GET,PUT,POST,DELETE"
},
200
shady sherif

Přál bych si, aby někdo sdílel tyto stránky se mnou dávno http://cors.io/ to by ušetřilo spoustu času ve srovnání se stavbou a spoléháním na vlastní proxy. Nicméně, když se přesunete do výroby, je vaše vlastní proxy nejlepší sázkou, protože stále kontrolujete všechny aspekty vašich dat.

Vše, co potřebujete:

https://cors.io/?http://HTTP_YOUR_LINK_HERE

168
yoshyosh

Pokud používáte Node.js , zkuste to:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Další informace: CORS na ExpressJS

67
Nguyen Tran

Je to problém napříč doménami používající Ajax. Musíte si být jisti, že přistupujete ke svým souborům na stejné cestě http:// bez www. (nebo přístupu z http://www. a příspěvku na stejnou cestu včetně www.), kterou prohlížeč považuje za jinou doménu při přístupu přes cestu www., takže vidíte, kde se problém nachází je. Vysíláte do jiné domény a prohlížeč blokuje tok kvůli problému Původ.

Pokud API není umístěno na stejném hostiteli, od kterého požadujete, je tok blokován a budete muset najít jiný způsob komunikace s rozhraním API.

63
Alin Razvan

Protože 
$ .ajax ({typ: "POST" - Volání VOLBY 
$ .post ( - Volání POST 

oba jsou různé Postman volá "POST" správně, ale když to nazveme bude "OPTIONS"

Pro webové služby c # - webapi 

Přidejte následující kód do souboru web.config pod tagem <system.webServer>. To bude fungovat

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Ujistěte se, že v volání ajax neděláte žádnou chybu

jQuery

$.ajax({
    url: 'http://mysite.Microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Problém s úhlem 4 naleznete na adrese: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Poznámka: Pokud hledáte stahování obsahu z webových stránek třetích stran pak to vám nepomůže. Můžete vyzkoušet následující kód, ale ne JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.Microsoft.sample.xyz.com/api/mycall");
48
George Livingston

Zkuste XDomain ,

Shrnutí: Čistý JavaScript CORS alternativa/polyfill. Není vyžadována žádná konfigurace serveru - stačí přidat proxy.html do domény, se kterou chcete komunikovat. Tato knihovna používá XHook ke spojení všech XHR , takže XDomain by měl fungovat ve spojení s libovolnou knihovnou.

22
user3359786

Pokud nechcete:

  1. V prohlížeči Chrome zakažte zabezpečení webu
  2. Použijte JSONP
  3. Chcete-li přesměrovat své požadavky, použijte web třetích stran

a jste si jisti, že váš server má povolený CORS (test CORS zde: http://www.test-cors.org/ )

Pak musíte předat parametr Origin se svou žádostí. Tento původ musí odpovídat původu, který váš prohlížeč odesílá s vaším požadavkem.

Můžete ji vidět zde: http://www.wikinomad.com/app/detail/Campgrounds/3591

Funkce úprav odesílá požadavek GET & POST jiné doméně pro načítání dat. Nastavil jsem parametr Origin, který tento problém vyřeší. Backend je engine mediaWiki.

tldr: Přidání parametru "Origin" do vašich volání, které musí být parametr Origin, který váš prohlížeč odešle (nemůžete spoofovat parametr Origin)

11
Ganesh Krishnan

Měl jsem s tím problém, když jsem použil AngularJS pro přístup k mému API. Stejný požadavek pracoval v SoapUI 5.0 a ColdFusion. Moje metoda GET již měla hlavičku Access-Control-Allow-Origin.

Zjistil jsem, že AngularJS dělá "zkušební" požadavek OPTIONS . ColdFusion standardně generuje metodu OPTIONS, ale nemá mnoho, konkrétně tyto záhlaví. Chyba byla generována v reakci na toto volání OPTIONS a ne na mé úmyslné volání na GET. Po přidání metody OPTIONS níže do rozhraní API byl problém vyřešen.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

Měl jsem následující konfiguraci, což mělo za následek stejnou chybu při požadavku na odpovědi ze serveru.

Server-side:SparkJava -> poskytuje REST-API
Strana klienta:ExtJs6 -> poskytuje vykreslování prohlížeče 

Na stránce server-side jsem to musel přidat do odpovědi: 

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

Na stránce client-side jsem musela přidat tímto požadavkem: 

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
8
kiltek

Na základě shrutiho odpovědi , jsem vytvořil zástupce prohlížeče Chrome s potřebnými argumenty:  enter image description here  enter image description here

8

https://github.com/Rob--W/cors-anywhere/ poskytuje (Node.js) kód, který můžete použít k nastavení a spuštění vlastního CORS proxy. Je aktivně udržován a poskytuje řadu funkcí pro kontrolu chování serveru proxy nad rámec základního odesílání správných záhlaví Access-Control-* odpovědí.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS má podrobnosti, které vysvětlují, jak prohlížeče zpracovávají žádosti o původ z originálu, které webové stránky klienta vytvářejí z JavaScriptu a jaké záhlaví musíte nakonfigurovat odesílání požadavku serverem, pokud je to možné.

V případě, že web, na který potřebujete provést žádost a získat odpověď od uživatele, nevrátí hlavičku odpovědi Access-Control-Allow-Origin, budou prohlížeče vždy zabraňovat požadavkům na křížový původ, které mu zadá přímo váš klient -S JavaScript kód z práce. A pokud tedy web není ten, který ovládáte a můžete konfigurovat chování, jediná věc, kterou bude pracovat v tomto případě, je proxy požadavky - buď prostřednictvím vlastního serveru proxy, který provozujete sami, nebo prostřednictvím otevřeného serveru proxy.

Jak je uvedeno v jiných komentářích, existují dobré důvody pro to, aby se vaše požadavky nedůvěřovaly otevřenému proxy serveru. To znamená, že pokud víte, co děláte a rozhodnete se, že otevřený proxy server pracuje pro vaše potřeby, https://cors-anywhere.herokuapp.com/ je ten, který je spolehlivě dostupný, aktivně udržovaný a který běží instance https://github.com/Rob--W/cors-anywhere/ code.

Stejně jako u jiných otevřených proxy serverů zde zmíněných (z nichž alespoň některé se zdají být k dispozici již déle), způsob, jakým to funguje, spočívá v tom, že namísto toho, aby váš klientský kód odeslal požadavek přímo na, např. http://foo.com, pošlete jej https://cors-anywhere.herokuapp.com/http://foo.com a proxy přidává potřebné Access-Control-* záhlaví k odpovědi, kterou prohlížeč vidí.

7
sideshowbarker

Problém můžete obejít pomocí YQL pro proxy požadavek prostřednictvím serverů Yahoo. Je to jen několik řádků kódu:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

Zde je odkaz s vysvětlením: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Pokud používáte Entity Framework , zdá se, že tato chyba bude někdy hozena, i když máte CORS povoleno. Přišel jsem na to, že k chybě došlo z důvodu chybějícího dokončení dotazu. Doufám, že to pomůže ostatním ve stejné situaci.

Následující kód může vyvolat chybu XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource.:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Chcete-li to opravit, je na konci dotazu vyžadováno volání finalizace jako .ToList() nebo .FirstOrDefault():

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
5
Loyalar

V mém případě jsem používal JEE7 JAX-RS aplikaci a následující triky pro mě perfektně fungovaly:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

Pokud se tato chybová zpráva zobrazí v prohlížeči:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

když se pokoušíte udělat žádost Ajax POST/GET vzdálenému serveru, který je mimo kontrolu, zapomeňte na tuto jednoduchou opravu:

<?php header('Access-Control-Allow-Origin: *'); ?>

Opravdu potřebujete, obzvláště pokud používáte JavaScript pouze na žádost Ajax, interního proxy, který bere váš dotaz a odešle ho na vzdálený server.

Nejprve v kódu JavaScriptu proveďte volání Ajax na svůj vlastní server, něco jako:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Poté vytvořte jednoduchý soubor PHP nazvaný proxy.php, který zabalí vaše data POST a připojí je ke vzdálenému serveru URL jako parametry. Uvedl jsem vám příklad, jak tento problém obejít s rozhraním API služby Vyhledávání:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Tím, že dělá:

echo json_encode(file_get_contents($url));

Právě děláte stejný dotaz, ale na straně serveru a poté by mělo fungovat dobře.

Odpověď kopírována a vkládána z NizarBsb

4
Flash

Úspěšně jsem dokázal (v mém případě pro fonty) řešit htaccess, ale OP se zřejmě příliš neliší. Můžete však použít vzor FileMatch a přidat libovolný typ rozšíření, aby nedal chybu cros.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

Pro rozhraní GoLang API:

Nejprve se můžete podívat na MDN CORS Doc a zjistit, co je CORS. Pokud je mi známo, CORS je o tom, zda povolit přístup ke zdroji serveru nebo ne.

A můžete omezit, který požadavek může mít původ na server nastavením Access-Control-Allow-Origin v Header odezvy serveru.

Například nastavení Následující záhlaví v odezvě serveru znamená, že k vašemu serveru může přistupovat pouze požadavek odeslaný z http://foo.example:

Access-Control-Allow-Origin: http://foo.example

a následným povolením požadavku odeslaného z libovolného původu (nebo domény):

Access-Control-Allow-Origin: *

A jak vím v chybové zprávě, requested resource znamená zdroj serveru, takže No 'Access-Control-Allow-Origin' header is present on the requested resource. znamená, že jste nezadali Access-Control-Allow-Origin záhlaví v odezvě na Server, nebo možná nastavíte, ale Původ požadavku není uveden v Access-Control-Allow-Origin, takže požadavek není povolen přístup:

V požadovaném zdroji není k dispozici záhlaví 'Access-Control-Allow-Origin'. Původ 'null' není tedy povolen.

V GoLangu používám balíček gorilla/mux k sestavení API serveru v localhost:9091 a dovolím CORS přidáním "Access-Control-Allow-Origin", "*" do hlavičky odpovědi:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

A já používám JavaScript v klientovi, na localhost:9092 žádost může Chrome úspěšně získat "OKOK" ze serveru localhost:9091.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

Kromě toho můžete zkontrolovat svou hlavičku žádosti/odpovědi pomocí nástrojů, jako je Fiddler.

4
yu yang Jian

Populární otázka - Další věc, na kterou se můžete podívat, pokud jste četli tak daleko a nic jiného nepomohlo. Pokud máte CDN, například Akamai, Limelight nebo podobné, můžete zkontrolovat klíč mezipaměti, který máte pro URI zdroje. Pokud nezahrnuje hodnotu záhlaví Origin, můžete vracet odpověď uloženou v mezipaměti při požadavku z jiného původu. Právě jsme strávili půl dne ladění tohoto. Konfigurace CDN byla aktualizována tak, aby obsahovala pouze hodnotu Původ pro několik vybraných domén, které jsou naše, a nastavte ji na hodnotu null pro všechny ostatní. Zdá se, že funguje a umožňuje prohlížečům z našich známých domén zobrazit naše zdroje. Samozřejmě všechny ostatní odpovědi jsou předpoklady k tomu, aby se sem dostali, ale pokud je CDN prvním skokem z vašeho prohlížeče, je to něco, co je třeba zkontrolovat. 

V našem případě jsme mohli vidět některé požadavky, které se dostaly do našich služeb, ale ne téměř objem, který stránky odesílaly. To nás upozornilo na CDN. Byli jsme schopni se vrátit a vidět, že původní žádost byla doručena z přímého požadavku, není součástí volání prohlížeče AJAX a hlavička odpovědi Access-Control-Allow-Origin nebyla zahrnuta. CDN tuto hodnotu zřejmě uložila do mezipaměti. Zdá se, že konfigurace Akamai CDN Tweak, která má být považována za hodnotu záhlaví požadavku na původ v rámci zápasu, zřejmě znemožnila práci pro nás.

Mnohokrát se mi to stává z javascriptu na můj php api, protože jeden z mála důvodů. Zapomněl jsem dát <?php header('Access-Control-Allow-Origin: *'); ? je jeden. To je užitečné pro přístup přes subdoménu. Dalším důvodem je, že v jQuery ajax požadavku jsem specifikoval konkrétní dataType a vrací jiný dataType, takže to vyvolá chybu. 

Posledním a nejvýznamnějším důvodem pro tuto chybu je chyba analýzy na stránce, kterou požadujete. Pokud narazíte na adresu URL této stránky ve svém prohlížeči, více než pravděpodobně uvidíte chybu analýzy a budete mít číslo řádku, které problém vyřeší. 

Doufám, že to někomu pomůže. Trvalo mi chvíli, kdy jsem to ladil a přál bych si, abych měl k dispozici seznam věcí, které je třeba ověřit.

3

V požadavku jsonp byste měli chytit "jsonpCallback" a poslat ho zpět.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Na straně backendu (pokud používáte jako backend PHP)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

V tomto případě se zdá, že reakce backendu vypadá 

jQuery331009526199802841284_1533646326884 ({"ip": "192.168.1.1"})

ale můžete nastavit "jsonpCallback" ručně na frontend a chytit ho na straně backendu

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

V tomto případě se zdá, že reakce backendu vypadá 

get_ip ({"ip": "192.168.1.1"})

2
Alexey Kolotsey

Na mých stránkách (založených na .NET) jsem právě přidal:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Velké díky to video.

2
FrenkyB

v případě, že chcete opravit na backend (v baňce), spíše než na přední straně, bych naprosto doporučil Flask CORS python balíček. Baňky Cors

S jedním jednoduchým řádkem v aplikaci app.py můžete automaticky vložit standardní povolit libovolný záhlaví původu nebo přizpůsobit podle potřeby.

2
Ben Watts

Pro úplnost, Apache umožňuje kors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

CORS je pro vás.

CORS je "Cross Origin Resource Sharing" a je to způsob, jak poslat požadavek na doménu. Nyní XMLHttpRequest2 a Fetch API podporují CORS.

Ale má své limity. Server potřebuje specifický nárok na Access-Control-Allow-Origin a nemůže být nastaven na '*'.

A pokud chcete, aby vám mohl jakýkoli původ poslat žádost, potřebujete JSONP (také musíte nastavit Access-Control-Allow-Origin, ale může být '*').

Pro spoustu požadavků, pokud nevíte, co si vybrat, myslím, že k tomu potřebujete plně funkční komponentu. Dovolte mi představit jednoduchou složku catta


Pokud používáte moderní prohlížeč (> Internet Explorer9, Chrome, Firefox, Edge atd.), Je velmi doporučeno použít jednoduchou, ale krásnou komponentu, https://github.com/Joker-Jelly/catta. Nemá žádné závislosti, je menší než 3 KB a podporuje Fetch, Ajax a JSONP se stejnou syntaxí a možností.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

To také podporuje celou cestu k importu do projektu, jako je ES6 modul, CommonJS a dokonce <script> v HTML.

2
Jelly

Většina z těchto odpovědí říká uživatelům, jak přidat záhlaví CORS na server, který řídí.

Pokud však potřebujete data ze serveru, který na webové stránce neovládáte, jedním řešením je vytvořit značku skriptu na vaší stránce, nastavit atribut src na koncový bod api, který nemá záhlaví CORS a načíst tato data. na stránku:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
2
duhaime

Tuto chybu mám s $http.get v Angular. Potřeboval jsem místo toho použít$http.jsonp.

2
Travis Heeter

Možná je to trochu složitější, ale můžete použít webový server pro směrování požadavku. S nodejs máte tento problém. Nejsem odborník v uzlu js. Takže nevím, jestli je to čistý kód. 

Ale to funguje pro mě

Zde je trochu exmaple:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

Pro server Ruby on Rails v application_controller.rb přidejte toto:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
1
张健健

V požadovaném zdroji se nenachází záhlaví 'Access-Control-Allow-Origin'. Původ ' https://sx.xyz.com ' proto není povolen přístup.

Také jsem čelil podobnému problému s Cross Domain Data Exchange v odpovědi Ajax jako error undefined. Ale odpověď v hlavičce byla Stavový kód: 200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

Řešení, jak se dostat kolem: V mém případě to bylo zavolat funkci checkapikey () přes Ajax do jiné domény a získat odpověď s údaji, kde bylo volání provedeno:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

Toto řešení bude určitě pracovat pro vás. Přidat popisovač vlastní zprávy

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

Zaregistrujte se do webapiconfig.cs.

config.MessageHandlers.Add (nový CustomHeaderHandler ());

A pokud používáte SignalR, přidejte tento kód do souboru globle.asax.cs

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            var referrer = Request.UrlReferrer;
            if (Context.Request.Path.Contains("signalr/") && referrer != null)
            {
                Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
            }
        }
1
Ujjwal

Pro Opera (funguje stejně jako Chrome) jsem pomocí tohoto příkazu spustil prohlížeč:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

Problém je vyřešen! Nyní můžu pracovat na lokálním HTML souboru (na mém pevném disku) a zavolat požadavky Ajaxu na vzdálený původ ve stejném souboru.

Poznámka 1: Můžete zadat libovolnou složku ve vašem domovském adresáři jako --user-data-dir.

Poznámka 2: Testováno na Debian 8 (Jessie)/Opera 39

 Here is a screenshot

Při normálním spuštění (bez výše uvedených parametrů) spadá stejný požadavek do bloku kódů chyb.

0
csonuryilmaz

Možná můžete zkopírovat zdroj z produkčního serveru na vývojový server A mít dynamicky nastavenou adresu URL zdroje. Tímto způsobem budete vždy číst ze stejného původu, čímž se vyloučí výjimka křížového původu.

0
bachstein

V mém případě jsem jako službu používal jarní zavaděč, můžete k odpovědnému provozu přidat anotaci Cross Origin Origin.

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // do something
} 
0
Chandan Kumar

Vytvořil jsem jednoduchý most ve své vlastní doméně, který načítá a zobrazuje obsah z externí domény.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

Namísto přístupu k externí doméně v systému AJAX jsem umístil adresu URL tohoto souboru mostu.

Content-Type byste měli upravit podle svých potřeb. Pokud jsou data v JSON, pak použijte header("Content-Type: application/json");

0
Muhammad Saqib

Jen zmínit jiný způsob "obejít" to - AJAX proxy. Odeslání požadavku na váš server, aby bylo možné načíst data z jiného původu a odeslat žádost zpět.

Dávám přednost tomuto přístupu před JSONP, protože má některé potenciální bezpečnostní problémy.

0
carobnodrvo

Tento problém jsem vyřešil povolením služby CORS pro adresu URL klienta, který přistupuje k webovému rozhraní API.

Například:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali