it-swarm.dev

Perché il mio JavaScript ottiene "No" l'intestazione Access-Control-Allow-Origin "è presente sulla risorsa richiesta" errore quando Postman non lo fa?

Sto cercando di fare l'autorizzazione usando JavaScript connettendomi a RESTfulAPI built in Flask . Tuttavia, quando faccio la richiesta, ottengo il seguente errore:

XMLHttpRequest non può caricare http: // myApiUrl/login . Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine 'null' non è quindi consentita l'accesso.

So che l'API o la risorsa remota deve impostare l'intestazione, ma perché ha funzionato quando ho fatto la richiesta tramite l'estensione di Chrome Postman ?

Questo è il codice di richiesta:

$.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

Se ho capito bene stai facendo un XMLHttpRequest a un dominio diverso da quello della tua pagina. Quindi il browser lo sta bloccando in quanto di solito consente una richiesta nella stessa origine per motivi di sicurezza. Devi fare qualcosa di diverso quando vuoi fare una richiesta interdominio. Un tutorial su come ottenerlo è Usando CORS.

Quando si utilizza il postino non sono limitati da questa politica. Citato da Cross-Origin XMLHttpRequest:

Le normali pagine Web possono utilizzare l'oggetto XMLHttpRequest per inviare e ricevere dati da server remoti, ma sono limitati dalla stessa politica di origine. Le estensioni non sono così limitate. Un'estensione può comunicare con server remoti al di fuori dell'origine, purché prima richieda i permessi di cross-origine.

1124

Questa non è una correzione per la produzione o quando l'applicazione deve essere mostrata al client, questo è utile solo quando UI e Backend development sono su diversi servers e in produzione sono effettivamente sullo stesso server. Ad esempio: Durante lo sviluppo dell'interfaccia utente per qualsiasi applicazione, se è necessario testarla localmente indirizzandola al server di back-end, in tale scenario questa è la soluzione perfetta. Per la correzione della produzione, le intestazioni CORS devono essere aggiunte al server di back-end per consentire l'accesso incrociato all'origine.

Il modo più semplice è semplicemente aggiungere l'estensione in google chrome per consentire l'accesso utilizzando CORS.

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

Abilita questa estensione ogni volta che vuoi consentire l'accesso a nessuna richiesta di intestazione 'access-control-allow-Origin'.

O 

In Windows, incolla questo comando nella finestra run 

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

questo aprirà un nuovo browser chrome che consente l'accesso alla richiesta di intestazione no 'access-control-allow-Origin'.

485
shruti

Se riesci a gestire JSON in risposta, prova a usare JSONP (nota il P alla fine) per parlare tra domini:

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

Ulteriori informazioni su come lavorare con JSONP here :

L'avvento di JSONP - essenzialmente un consecutivo script di scripting cross-site - ha aperto la porta a potenti mashup di contenuti. Molti siti importanti forniscono servizi JSONP, consentendo l'accesso ai propri contenuti tramite un'API predefinita.

322
Gavin

È molto semplice da risolvere se si utilizza PHP . Aggiungi il seguente script all'inizio della tua pagina PHP che gestisce la richiesta:

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

Attenzione: Questo contiene un problema di sicurezza per il tuo file PHP che potrebbe essere chiamato dagli autori di attacchi. devi utilizzare sessioni e cookie per l'autenticazione per impedire il tuo file/servizio contro questo attacco. Il tuo servizio è vulnerabile a falsificazione di richieste tra siti (CSRF).

Se stai usando Node-red devi permettere a CORS nel file node-red/settings.js di non commentare le seguenti righe:

// 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

Vorrei che qualcuno condividesse questo sito con me molto tempo fa http://cors.io/ avrebbe risparmiato un sacco di tempo rispetto a costruire e fare affidamento sul mio proxy. Tuttavia, quando passi alla produzione, avere il tuo proxy è la soluzione migliore dal momento che controlli ancora tutti gli aspetti dei tuoi dati.

Tutto ciò di cui hai bisogno:

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

168
yoshyosh

Se stai usando Node.js , provalo:

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();
});

Ulteriori informazioni: CORS su ExpressJS

67
Nguyen Tran

Esiste un problema inter-dominio che utilizza Ajax. Devi essere sicuro che stai accedendo ai tuoi file sullo stesso percorso http:// senza www. (o accesso da http://www. e posta sullo stesso percorso incluso www.) che il browser considera come un altro dominio quando accedono tramite un percorso www., quindi vedi dove si trova il problema è. Stai postando in un dominio diverso e il browser blocca il flusso a causa del problema di Origin.

Se API non è posizionato sullo stesso host da cui si sta richiedendo, il flusso viene bloccato e sarà necessario trovare un altro modo per comunicare con l'API.

63
Alin Razvan

Perché 
$ .ajax ({tipo: "POST" - Chiamate OPZIONI 
$ .post ( - Chiamate POST 

entrambe le chiamate Postman "POST" sono diverse, ma quando le chiamiamo sarà "OPZIONI"

Per i servizi web c # - webapi 

Aggiungi il seguente codice nel tuo file web.config sotto il tag <system.webServer>. Questo funzionerà

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

Assicurati di non commettere errori nella chiamata ajax

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");
    }
});

Problema angolare 4, fare riferimento: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Nota: Se stai cercando di scaricare contenuti dal sito web di terzi allora questo non ti aiuterà. Puoi provare il seguente codice ma non JavaScript.

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

Prova XDomain ,

Riepilogo: Una pura alternativa CORS JavaScript/polyfill. Non è richiesta alcuna configurazione del server - basta aggiungere un proxy.html sul dominio con cui si desidera comunicare. Questa libreria utilizza XHook per agganciare tutti XHR , quindi XDomain dovrebbe funzionare in combinazione con qualsiasi libreria.

22
user3359786

Se non vuoi:

  1. Disattiva la sicurezza Web in Chrome
  2. Usa JSONP
  3. Utilizzare un sito di terze parti per reindirizzare le richieste

e sei sicuro che il tuo server ha abilitato CORS allora (prova CORS qui: http://www.test-cors.org/ )

Quindi devi passare il parametro Origin con la tua richiesta . Questa Origine DEVE corrispondere all'origine che il tuo browser invia con la tua richiesta.

Puoi vederlo in azione qui: http://www.wikinomad.com/app/detail/Campgrounds/3591

La funzionalità di modifica invia una richiesta GET e POST a un dominio diverso per il recupero dei dati. Ho impostato il parametro Origin che risolve il problema . Il backend è un motore mediaWiki.

tldr: aggiungi il parametro "Origin" alle tue chiamate che deve essere il parametro Origin che il tuo browser invia (non puoi spoofare il parametro Origin)

11
Ganesh Krishnan

Ho avuto un problema con questo quando ho usato AngularJS per accedere alla mia API. La stessa richiesta ha funzionato in SoapUI 5.0 e ColdFusion. Il mio metodo GET aveva già l'intestazione Access-Control-Allow-Origin.

Ho scoperto che AngularJS effettua una richiesta OPZIONI di "prova" . ColdFusion, per impostazione predefinita, genera il metodo OPTIONS, ma non ha molto, queste intestazioni in particolare. L'errore è stato generato in risposta a tale chiamata OPTIONS e non alla mia chiamata intenzionale a GET. Dopo aver aggiunto il seguente metodo OPZIONI alla mia API, il problema è stato risolto.

<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

Ho avuto la seguente configurazione, risultante nello stesso errore, quando ho richiesto risposte dal server.

Lato server:SparkJava -> fornisce l'API REST
Lato client:ExtJs6 -> fornisce il rendering del browser 

Sul lato server ho dovuto aggiungere questo alla risposta: 

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

Sul lato lato client ho dovuto aggiungere questo alla richiesta: 

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

In base alla risposta di shruti , ho creato una scorciatoia del browser Chrome con gli argomenti necessari: enter image description here enter image description here

8

https://github.com/Rob--W/cors-anywhere/ fornisce il codice (Node.js) che è possibile utilizzare per configurare ed eseguire il proprio proxy CORS. È mantenuto attivamente e offre una serie di funzioni per il controllo del comportamento del proxy oltre al semplice invio delle intestazioni di risposta Access-Control-* corrette.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS ha dettagli per spiegare come i browser gestiscono le richieste cross-Origin che le applicazioni Web lato client fanno da JavaScript e quali intestazioni devi configurare l'invio da parte del server a cui viene effettuata la richiesta, se possibile.

Nel caso in cui un sito di cui hai bisogno per effettuare una richiesta e di ottenere una risposta non restituisca l'intestazione di risposta Access-Control-Allow-Origin, i browser sono always andando a bloccare le richieste di cross-Origin fatte direttamente dal tuo client-side Codice JavaScript dal lavoro. Pertanto, se il sito non è quello che controlli e puoi configurare il comportamento, l'unica cosa che will funzionerà in quel caso è il proxy delle richieste, sia attraverso il tuo proxy che te stesso o attraverso un proxy aperto.

Come menzionato in altri commenti qui, ci sono buone ragioni per non fidarsi di un proxy aperto con le tue richieste. Detto questo, se sai cosa stai facendo e decidi che un proxy aperto funziona per le tue esigenze, https://cors-anywhere.herokuapp.com/ è uno che è disponibile in modo affidabile, mantenuto attivamente e che viene eseguito un'istanza del https://github.com/Rob--W/cors-anywhere/ code.

Come con altri proxy aperti menzionati qui (un paio dei quali almeno non sembrano più disponibili), il modo in cui funziona è che invece di inviare il codice client direttamente a una richiesta, ad esempio, http://foo.com, lo invii a https://cors-anywhere.herokuapp.com/http://foo.com e il proxy aggiunge le intestazioni Access-Control-* necessarie alla risposta visualizzata dal browser.

7
sideshowbarker

È possibile aggirare il problema utilizzando YQL per inoltrare la richiesta tramite i server di Yahoo. Sono solo alcune righe di codice:

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);
    },
});

Ecco il link con una spiegazione: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Se si sta utilizzando Entity Framework , sembra che a volte questo errore venga generato anche se è abilitato CORS. Ho capito che l'errore si è verificato a causa della mancata finalizzazione della query. Spero che questo aiuti gli altri nella stessa situazione.

Il seguente codice può generare l'errore 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,
    });
}

Per risolvere il problema, è necessaria una chiamata di finalizzazione come .ToList() o .FirstOrDefault() alla fine della query, in questo modo:

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

Nel mio caso stavo usando l'applicazione JEE-JEE J e i seguenti trucchi hanno funzionato perfettamente per me:

@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

Se ricevi questo messaggio di errore dal browser:

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

quando stai tentando di eseguire una richiesta POST/GET Ajax su un server remoto che è fuori dal tuo controllo, ti preghiamo di dimenticare questa semplice soluzione:

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

È davvero necessario, soprattutto se si utilizza JavaScript solo per eseguire la richiesta Ajax, un proxy interno che accetta la query e la invia al server remoto.

Prima nel tuo codice JavaScript, fai una chiamata Ajax al tuo server, qualcosa del tipo:

$.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);
    }
});

Quindi, crea un semplice file PHP chiamato proxy.php per avvolgere i tuoi dati POST e aggiungerli al server URL remoto come parametri. Ti faccio un esempio di come bypassare questo problema con l'API di ricerca hotel Expedia:

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));
 }

Facendo:

echo json_encode(file_get_contents($url));

Stai facendo la stessa query, ma sul lato server e dopo, dovrebbe funzionare bene.

Risposta copiata e incollata da NizarBsb

4
Flash

Sono riuscito a risolvere con successo (nel mio caso per i caratteri) usando htaccess ma, ovviamente, OP sta chiedendo qualcosa di diverso. Ma puoi usare il pattern di FileMatch e aggiungere qualsiasi estensione in modo da non dare un errore 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

Per l'API GoLang:

Per prima cosa puoi dare un'occhiata a MDN CORS Doc per sapere cos'è CORS. Per quanto ne so, CORS si occupa di consentire a Origin Of Request di accedere o meno alle risorse del server.

Ed è possibile limitare quale richiesta Origin può accedere al server impostando Access-Control-Allow-Origin a Header di Server Response.

Ad esempio, l'impostazione dell'intestazione seguente in Server Response significa che solo la richiesta inviata da http://foo.example può accedere al tuo server:

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

e in seguito consentire la richiesta inviata da qualsiasi origine (o dominio):

Access-Control-Allow-Origin: *

E come noto nel messaggio di errore, requested resource significa risorsa del server, quindi No 'Access-Control-Allow-Origin' header is present on the requested resource. significa che non hai impostato l'header Access-Control-Allow-Origin nella risposta del server, o forse hai impostato ma l'origine della richiesta non è in Access-Control-Allow-Origin quindi la richiesta non è consentita accesso:

Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine 'null' non è quindi consentita l'accesso.

In GoLang, utilizzo il pacchetto gorilla/mux per creare server API su localhost:9091 e consento a CORS di aggiungere "Access-Control-Allow-Origin", "*" all'intestazione della risposta:

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")
}

E io uso JavaScript nel client, in localhost:9092 fare richiesta da Chrome può ottenere con successo "OKOK" dal server 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);
    }
}

Inoltre puoi controllare l'intestazione richiesta/risposta con strumenti come Fiddler.

4
yu yang Jian

Domanda popolare - Un'altra cosa da guardare se hai letto fino ad ora e nient'altro ha aiutato. Se si dispone di un CDN come Akamai, Limelight o simile, è possibile controllare la chiave di cache che si ha per l'URI della risorsa. Se non include il valore dell'intestazione Origin, è possibile che venga restituita una risposta nella cache quando richiesto da un'altra origine. Abbiamo appena trascorso mezza giornata a eseguire il debug di questo. La configurazione CDN è stata aggiornata per includere solo il valore Origin per alcuni domini selezionati che sono nostri e impostarlo su null per tutti gli altri. Questo sembra funzionare e consente ai browser dei nostri domini conosciuti di visualizzare le nostre risorse. Certamente tutte le altre risposte sono prerequisiti per arrivare qui, ma se il CDN è il primo salto dal tuo browser questo è qualcosa da rivedere. 

Nel nostro caso potremmo vedere alcune richieste che lo rendono al nostro servizio ma non quasi il volume che il sito stava inviando. Questo ci ha indirizzato verso il CDN. Siamo stati in grado di tornare indietro e vedere la richiesta originale è stata fornita da una richiesta diretta, non parte di una chiamata del browser AJAX e l'intestazione di risposta Access-Control-Allow-Origin non è stata inclusa. Apparentemente il CDN ha memorizzato questo valore. La configurazione di Akamai CDN Tweak per considerare il valore dell'intestazione della richiesta Origin come parte della partita sembra averlo fatto funzionare per noi.

Un sacco di volte mi succede da javascript al mio php api, perché uno dei pochi motivi. Ho dimenticato di mettere <?php header('Access-Control-Allow-Origin: *'); ? è uno. Questo è utile per l'accesso al dominio secondario. Un altro motivo è che nella richiesta jQuery ajax sto specificando uno specifico dataType e restituendo un diverso dataType, quindi genera un errore. 

L'ultimo e più importante ragionamento per questo errore è che c'è un errore di analisi sulla pagina che stai richiedendo. Se si preme l'URL della pagina nel browser piuttosto che probabilmente si vedrà un errore di analisi e si avrà un numero di riga per risolvere il problema. 

Spero che questo aiuti qualcuno. Mi ci è voluto un po 'ogni volta per eseguire il debug di questo e vorrei avere una lista di cose da verificare.

3

Nella richiesta jsonp dovresti prendere "jsonpCallback" e rimandarlo indietro.

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

Sul lato back-end (se usi come backend PHP)

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

In questo caso, la risposta del backend sembra 

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

ma puoi impostare un "jsonpCallback" manualmente sul frontend e catturarlo sul lato backend

$.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) }
});

In questo caso, la risposta del backend sembra 

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

2
Alexey Kolotsey

Sul mio sito web (basato su .NET) ho appena aggiunto questo:

<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>

Grazie mille a questo video.

2
FrenkyB

nel caso in cui si desideri risolvere questo problema sul backend (in Flask), piuttosto che sul front end, consiglierei assolutamente il pacchetto python di Flask CORS. Flask Cors

Con una sola linea nella tua app.py puoi inserire automaticamente lo standard per consentire qualsiasi intestazione di origine, o personalizzarlo come richiesto.

2
Ben Watts

Per completezza, Apache consente cors:

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 è per te.

CORS è "Cross Origin Resource Sharing" ed è un modo per inviare una richiesta interdominio. Ora XMLHttpRequest2 e Fetch API supportano entrambi CORS.

Ma ha i suoi limiti. Il server deve richiedere in modo specifico Access-Control-Allow-Origin e non può essere impostato su '*'.

E se vuoi che Origin possa inviarti una richiesta, hai bisogno di JSONP (devi anche impostare Access-Control-Allow-Origin, ma può essere '*').

Per un sacco di modalità di richiesta se non sai cosa scegliere, penso che hai bisogno di un componente completamente funzionale per farlo. Permettetemi di introdurre un componente semplice catta


Se si utilizza un browser moderno (> Internet Explorer9, Chrome, Firefox, Edge, ecc.), Si consiglia di utilizzare un componente semplice, ma bello, https://github.com/Joker-Jelly/catta. Non ha dipendenze, è inferiore a 3 KB e supporta Fetch, Ajax e JSONP con la stessa sintassi e opzioni semplici.

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

Supporta anche tutto il modo di importare nel tuo progetto, come il modulo ES6, CommonJS e persino <script> in HTML.

2
Jelly

La maggior parte di queste risposte spiega agli utenti come aggiungere intestazioni CORS a un server che controllano.

Tuttavia, se hai bisogno di dati da un server che non controlli in una pagina web, una soluzione è creare un tag script sulla tua pagina, impostare l'attributo src sull'endpoint api che non ha intestazioni CORS, quindi caricare quei dati sulla pagina:

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

Ho ricevuto questo errore con $http.get in Angular. Avevo bisogno di usare$http.jsonpinvece.

2
Travis Heeter

Forse è un po 'complicato ma puoi usare un server web per indirizzare la richiesta . Con nodejs non hai questo problema. Non sono un esperto nel nodo js. Quindi non so se questo è un codice pulito. 

Ma questo funziona per me

Ecco un piccolo esempio:

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

Per il server Ruby on Rails in application_controller.rb, aggiungere questo:

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
张健健

Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine ' https://sx.xyz.com ' non è quindi consentita l'accesso.

Ho anche affrontato un problema simile con Cross Domain Data Exchange nella risposta Ajax come error undefined. Ma la risposta nell'intestazione era Codice di stato: 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.

La soluzione per aggirarlo: Nel mio caso si trattava di chiamare la funzione checkapikey () tramite Ajax a un altro dominio e ottenere la risposta con i dati a cui è stata effettuata la chiamata:

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 ॐ

Questa soluzione funzionerà sicuramente per te. Aggiungi l'handle del messaggio personalizzato

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;
    }
}

Registrati su webapiconfig.cs.

config.MessageHandlers.Add (new CustomHeaderHandler ());

E se stai usando SignalR, aggiungi questo codice nel file 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

Per Opera (funziona come Chrome), ho avviato il browser con questo comando:

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

Il problema è risolto! Ora posso lavorare su un file HTML locale (sul mio disco fisso) e chiamare le richieste Ajax alle origini remote nello stesso file.

Nota 1: Puoi dare qualsiasi cartella nella tua directory home come --user-data-dir.

Nota 2: Testato su Debian 8 (Jessie)/Opera 39

 Here is a screenshot

Quando si avvia normalmente (senza i parametri sopra indicati), la stessa richiesta rientra nel blocco del codice di errore.

0
csonuryilmaz

Forse è possibile copiare la risorsa dal server di produzione al server di sviluppo E avere l'URL della risorsa per adattarsi dinamicamente. In questo modo leggerai sempre dalla stessa Origine, eliminando la croce Origine eccezione.

0
bachstein

Nel mio caso stavo usando il boot primaverile come servizio, è possibile aggiungere l'annotazione cross Origin sull'operazione responsabile.

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

Ho creato un bridge semplice nel mio dominio che recupera e mostra il contenuto da un dominio esterno.

<?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 "";
}

?>

Ora, invece di accedere a un dominio esterno in AJAX, ho inserito l'URL di questo file bridge.

Dovresti regolare Content-Type in base alle tue esigenze. Se i dati sono in JSON, utilizzare header("Content-Type: application/json");

0
Muhammad Saqib

Solo per menzionare un altro modo di "bypassarlo" - AJAX proxy. Invia richiesta al tuo server per recuperare i dati da un'altra Origine e inviare la richiesta a te.

Preferisco questo approccio rispetto a JSONP perché ha alcuni potenziali problemi di sicurezza.

0
carobnodrvo

Ho risolto questo problema abilitando CORS per l'URL del client che accede all'API Web e ha funzionato correttamente.

Per esempio:

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