De ce nu-mi codul JavaScript obține un "Nu 'Access-Control-Allow-Origin' antet este prezent pe resursa solicitată" eroare atunci când Poștașul nu?

Dacă am înțeles bine faci un XMLHttpRequest pentru un alt domeniu decât pagina ta este pe. Deci, browser-ul se blochează, deoarece permite, de obicei, o cerere în aceeași origine, din motive de securitate. Ai nevoie de a face ceva diferit atunci când vrei să faci un cross-domain cerere. Un tutorial despre modul de a realiza că este Folosind CORS.

Atunci când utilizați poștașul nu sunt limitate prin această politică. Citat din Cross-Origin XMLHttpRequest:

pagini web Obișnuite poate folosi obiectul XMLHttpRequest pentru a trimite și primi date de la serverele de la distanță, dar're limitate de aceeași origine comună. Extensiile sunt't atât de limitat. O extensie poate vorbi la serverele de la distanță în afara originii sale, atâta timp cât primele cereri cross-origin permisiuni.

Acest lucru nu este un fix pentru producție sau atunci când cererea trebuie să fie prezentate de client, acest lucru este de ajutor numai atunci când UI și Backend de dezvoltare sunt pe diferite servere și în producție sunt de fapt pe același server. De exemplu: în Timp ce în curs de dezvoltare UI pentru orice aplicație în cazul în care există o nevoie să-l testeze la nivel local, arătând că pentru a backend server, în care scenariul acesta este perfect pentru a repara. Pentru producția fix, CORS antete are să fie adăugat la serverul back-end pentru a permite cruce origine acces.

Cea mai ușoară cale este să adăugați extensia în google chrome pentru a permite accesul folosind CORS.

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

Doar permite această extensie ori de câte ori doriți permite accesul la nici un 'access-control-allow-origin' antet cerere.

Sau

În Windows, pasta această comandă în fugi fereastra

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

aceasta va deschide o noua chrome browser care permite accesul la nici un 'access-control-allow-origin' antet cerere.

Dacă se poate face cu JSON în schimb, încercați să utilizați JSONP (nota P la sfârșitul) pentru a vorbi între domenii:

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

Afla mai multe despre lucrul cu JSONP aici:

apariția de JSONP — în esență, o consensual cross-site scripting hack — a deschis ușa puternic mashup-uri de conținut. Multe site-uri importante oferi JSONP servicii, permițându-vă accesul la conținutul lor, prin intermediul unui predefinite API.

Avertisment: Folosind acest răspuns pe producție poate provoca o problemă de securitate care API-ul/serviciul ar putea fi numit de către oricine are URL-ul, inclusiv atacatorii. trebuie să utilizați sesiuni și module cookie de autentificare pentru a preveni API/serviciu împotriva acestui atac. API-ul/serviciul este vulnerabil la cross-site request falsificare (CSRF).

L's foarte simplu de rezolvat dacă utilizați PHP. Trebuie doar să adăugați următorul script la început de pagină PHP care se ocupă de cerere:

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

Dacă utilizați Nod-red trebuie să permită CORS în node-red/settings.js dosarul lui de către onu-comentarea următoarele linii:

// 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"
},

Dacă utilizați Vas la fel ca și întrebarea; trebuie mai întâi să instalați `balon-cor

$ pip install -U flask-cors

Apoi includ vasul cors în aplicația dvs.

from flask_cors import CORS

O aplicație simplă va arata ca

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Pentru mai multe detalii, puteți verifica balon documentația

Aș vrea ca cineva împărtășit acest site cu mine mult timp în urmă http://cors.io l-ar fi salvat o tona de timp în comparație cu clădirea și bazându-se pe propria mea proxy. Cu toate acestea, pe măsură ce trece la producție, având propria proxy este cel mai bun pariu din moment ce încă mai controla toate aspectele legate de datele tale.

Tot ce ai nevoie:

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

Dacă utilizați Node.js, încercați să-l:

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

Mai multe informații: CORS pe ExpressJS

Nu's a cross-domain problema folosind Ajax. Tu trebuie să fii sigur că sunt accesarea fișierelor de pe același http:// calea fără www. (sau de acces la http://www.și post la aceeași cale, inclusivwww.) care browser-ul consideră ca un alt domeniu, atunci când accesează prin intermediul unuiwww.` calea, astfel încât veți vedea unde este problema. Postați la un domeniu diferit și browser-ul blochează fluxul din cauza originii problema.

Dacă API nu este plasat pe aceeași gazdă care se solicită din, fluxul este blocat și va trebui să găsească un alt mod de a comunica cu API.

Pentru că
$.ajax({tipul: "POST" - Apeluri OPȚIUNI
$.post( - Apeluri POST

ambele sunt diferite sună Poștașul "POST" corect, dar atunci când am apel va fi "OPȚIUNI"

Pentru c# servicii web - webapi

Vă rugăm să adăugați următorul cod în dvs. de web.config sub <sistemul.server de web> tag. Acest lucru va funcționa

Vă rugăm să asigurați-vă că nu faceți nici o greșeală în apel 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");
    }
});

Unghiulare 4 problemă, vă rugăm să consultați : http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Notă: Dacă sunteți în căutarea pentru descărcarea de conținut de la terțe părți site-ul apoi acest lucru nu te va ajuta. Puteți încerca următoarele cod, dar nu JavaScript.

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

Încerca XDomain,

Rezumat: O pură JavaScript CORS alternative/polyfill. Nici un server de configurare necesare - trebuie doar să adăugați un proxy.html pe domeniul pe care vrei să comunici. Această bibliotecă folosește XHook să cârlig de toate XHR, deci XDomain ar trebui să funcționeze în combinație cu orice bibliotecă.

Dacă NU doriți să:

1. Dezactivați securitatea web în Chrome
2. Utilizarea JSONP
3. Utilizați o terță parte site-ul de a re-ruta cereri

și sunteți sigur că server-ul dvs. are CORS activat atunci (test CORS aici: http://www.test-cors.org/)

Apoi, aveți nevoie pentru a trece de origine parametru cu cererea dumneavoastră. Această origine TREBUIE să se potrivească origine care browser-ul dvs. trimite cu cererea dumneavoastră.

Îl puteți vedea în acțiune aici: http://www.wikinomad.com/app/detail/Campgrounds/3591

Editare funcționalitate trimite o IA & cerere POST la un alt domeniu pentru preluarea datelor. Am stabilit originea parametru care rezolvă problema. Backend este un mediaWiki motor.

tldr: Adăugați "originea" parametru de apeluri care trebuie să fie de Origine parametru care browser-ul dvs. trimite (nu se poate falsifica originea parametru)

Am avut o problema cu asta atunci când am folosit AngularJS pentru a accesa API. Aceeași cerere a lucrat în SoapUI 5.0 si ColdFusion. Mea metoda avut deja Access-Control-Allow-Origin antet.

Am aflat că AngularJS face o "procesul" OPȚIUNI de cerere. ColdFusion, implicit, generează OPȚIUNI metoda, dar nu trebuie mult, aceste antete, în special. Eroarea a fost generat ca răspuns la faptul că OPȚIUNILE de apel, și nu a mea intenționată apel pentru a OBȚINE. După ce am adăugat OPȚIUNI metoda de mai jos pentru a-mi API, problema a fost rezolvată.

Bazat pe shruti's a răspunde, am'am creat o comandă rapidă de la browser-ul Chrome cu nevoie de argumente:

Am avut următoarea configurație, care rezultă în aceeași eroare, atunci când solicită răspunsuri de la server.

Server-side: SparkJava --> oferă RESTUL-API Client-side: ExtJs6 --> oferă Browser-ul de randare

Pe server-side am avut de a adăuga acest răspuns:

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

Pe client-side I trebuit să adauga această cerere:

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

https://github.com/Rob--W/cors-anywhere/ oferă (Node.js) cod pe care îl puteți folosi pentru a configura și rula propria ta CORS proxy. Este menținut în mod activ și oferă o serie de caracteristici pentru controlul proxy comportament dincolo de bază trimiterea corectă de Acces-Control-*` anteturile de răspuns.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS are detalii pentru a explica cum browsere se ocupe de cross-origine solicită ca partea clientului aplicatii web face din JavaScript și ce anteturile trebuie să configurați trimiterea de către server o cerere este făcută pentru tine, dacă poți.

În cazul în care un site ai nevoie pentru a face o cerere și a obține un răspuns de la a nu-i reveni Access-Control-Allow-Origin antet de răspuns, browsere sunt întotdeauna de gând să blocheze cross-origin solicitări adresate direct de către client-side JavaScript cod de lucru. Și deci, dacă site-ul nu este o poți controla și poate configura comportamentul, singurul lucru care va lucru în acest caz este proxy cererile—fie prin proxy propriu de a executa singur sau printr-un proxy deschis.

Așa cum am menționat în alte comentarii aici, există motive bune pentru care nu am încredere într-un proxy deschis cu solicitările dumneavoastră. Asta a spus, dacă știi ce faci și de a vă decide un proxy deschis lucrările pentru nevoile tale, https://cors-anywhere.herokuapp.com/ este unul fiabil disponibile, menținut în mod activ, și care ruleaza un exemplu de https://github.com/Rob--W/cors-anywhere/ cod.

Ca și cu alte proxy-uri deschise menționate aici (un cuplu din care cel puțin par să nu fie disponibile mai), modul în care aceasta funcționează este că în loc de a avea codul de client trimite o cerere direct la, de exemplu, http://foo.com tu trimite-l lahttps://cors-anywhere.herokuapp.com/http://foo.comși proxy adaugă necesare de Acces-Control-* anteturile de răspuns browser-ul vede.

Puteți trece de la problemă prin utilizarea YQL să proxy cererea prin Yahoo's servere. Acesta este la doar câteva linii de cod:

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

Aici's link-ul cu o explicație: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

a pune acest lucru în fața url-ul dvs.: https://cors-anywhere.herokuapp.com/

deci, de exemplu: https://cors-anywhere.herokuapp.com/https://www.ndbc.noaa.gov/data/realtime2/46258.txt

În cazul meu, am fost folosind JEE7 JAX-RS cerere și următoarele trucuri lucrat perfect pentru mine:

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

Dacă utilizați Entity Framework, se pare că această eroare va fi, uneori, aruncat chiar dacă au COR ului. Mi-am dat seama că eroarea a avut loc din cauza lipsei de finalizare a interogării. Am'm sperând că acest lucru va ajuta pe alții în aceeași situație.

Codul următor poate arunca XMLHttpRequest nu se poate încărca http://myApiUrl/login. Nu 'Access-Control-Allow-Origin' antet este prezent pe resursa solicitată. eroare:

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

Pentru a remedia problema, o finalizare apel ca `.ToList () "sau".FirstOrDefault () la sfârșitul interogare este necesar, astfel:

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

Am reușit cu succes să rezolve (in cazul meu pentru fonturi) folosind htaccess dar, evident, OP cere pic diferit. Dar puteți folosi FileMatch model și se adaugă nici un fel de extensie, astfel încât nu va't da cros de eroare.

    Header set Access-Control-Allow-Origin "*"

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

Dacă serverul dvs. este un Springboot Aplicație, atunci vă rugăm să adăugați această adnotare în restul controlerul de la top - @CrossOrigin

Acesta ar trebui să funcționeze acum . Multumesc