Waarom ontvangt mijn JavaScript-code de kop ‘Access-Control-Allow-Origin’ is niet aanwezig op de gevraagde bron” fout, terwijl Postman dat niet doet?

Mod-opmerking: deze vraag gaat over waarom XMLHttpRequest/fetch/etc. in de browser zijn onderworpen aan de beperkingen van het Hetzelfde toegangsbeleid (u krijgt fouten met vermelding van CORB of CORS), terwijl Postman dat niet is. Deze vraag gaat niet over het oplossen van een "No ‘Access-Control-Allow-Origin’…" fout. Het gaat erom waarom ze gebeuren.

Stop alsjeblieft met posten:

• CORS-configuraties voor elke taal/framework onder de zon. In plaats daarvan zoek uw relevante taal/raamwerkvraag.
• Services van derden die een verzoek toestaan ​​om CORS te omzeilen
• Opdrachtregelopties voor het uitschakelen van CORS voor verschillende browsers

Ik probeer autorisatie uit te voeren met JavaScript door verbinding te maken met de RESTful API ingebouwde Flask. Wanneer ik het verzoek doe, krijg ik echter de volgende foutmelding:

XMLHttpRequest kan http://myApiUrl/login niet laden. Er is geen ‘Access-Control-Allow-Origin’-header aanwezig op de aangevraagde bron. Origin ‘null’ heeft daarom geen toegang.

Ik weet dat de API of externe bron de header moet instellen, maar waarom werkte het toen ik het verzoek deed via de Chrome-extensie Postbode?

Dit is de verzoekcode:

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

Antwoord 1, autoriteit 100%

Als ik het goed heb begrepen, doet u een XMLHttpRequest naar een ander domein dan uw pagina is Aan. Dus de browser blokkeert het omdat het om veiligheidsredenen meestal een verzoek in dezelfde oorsprong toestaat. U moet iets anders doen als u een domeinoverschrijdend verzoek wilt doen. Een tutorial over hoe je dat kunt bereiken is CORS gebruiken.

Als u postbode gebruikt, worden deze niet beperkt door dit beleid. Geciteerd uit Cross-Origin XMLHttpRequest:

Gewone webpagina’s kunnen het XMLHttpRequest-object gebruiken om gegevens van externe servers te verzenden en te ontvangen, maar ze worden beperkt door hetzelfde oorsprongsbeleid. Extensies zijn niet zo beperkt. Een extensie kan communiceren met externe servers buiten de oorsprong, zolang deze eerst om cross-origin-machtigingen vraagt.

Antwoord 2, autoriteit 20%

WAARSCHUWING: Het gebruik van Access-Control-Allow-Origin: * kan uw API/website kwetsbaar maken voor cross-site request forgery (CSRF) aanvallen. Zorg ervoor dat u de risico’s begrijpt voordat u deze code gebruikt.

Het is heel eenvoudig op te lossen als je PHP gebruikt. Voeg gewoon het volgende script toe aan het begin van uw PHP-pagina die het verzoek afhandelt:

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

Als je Node-red gebruikt, moet je CORS in het bestand node-red/settings.js door het volgende te verwijderen regels:

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

Als je Flask hetzelfde gebruikt als de vraag; je moet eerst flask-cors

. installeren

$ pip install -U flask-cors

Vermeld dan de Flask cors in uw aanvraag.

from flask_cors import CORS

Een eenvoudige applicatie ziet er als volgt uit:

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Voor meer details kun je de Flask-documentatie raadplegen.

Antwoord 3, autoriteit 6%

Omdat
$.ajax({type: "POST" – roept OPTIES
aan
$.post( – Oproepen POST

Beide zijn verschillend. Postbode roept “POST” goed, maar als we het noemen, zijn het "OPTIES".

Voor C#-webservices – Web-API

Voeg de volgende code toe aan uw web.config-bestand onder <system.webServer> label. Dit zal werken:

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

Zorg ervoor dat u geen fouten maakt in de Ajax-oproep

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

Opmerking: als u op zoek bent naar het downloaden van inhoud van een website van derden, dan zal dit u niet helpen. Je kunt de volgende code proberen, maar niet JavaScript.

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

Antwoord 4, autoriteit 2%

In het onderstaande onderzoek als API gebruik ik http://example.com in plaats van http://myApiUrl/login van uw vraag, omdat deze eerste werkt.

Ik neem aan dat uw pagina op http://my-site.local:8088.

De reden waarom u verschillende resultaten ziet, is dat Postman:

• set header Host=example.com (uw API)
• Koptekst Origin

NIET instellen

Dit is vergelijkbaar met de manier waarop browsers verzoeken verzenden wanneer de site en API hetzelfde domein hebben (browsers stellen ook het headeritem Referer=http://my-site.local:8088 in), maar ik zie het niet in Postman). Als de kop Origin niet is ingesteld, staan ​​de servers gewoonlijk dergelijke verzoeken standaard toe.

Dit is de standaard manier waarop Postman verzoeken verzendt. Maar een browser verzendt verzoeken anders wanneer uw site en API verschillende domeinen hebben, en dan CORS gebeurt en de browser automatisch:

• stelt header Host=example.com in (de jouwe als API)
• zet header Origin=http://my-site.local:8088 (uw site)

(De kop Referer heeft dezelfde waarde als Origin). En nu in de Console & Tabblad Netwerken ziet u:

Als je Host != Origin hebt, is dit CORS, en wanneer de server een dergelijk verzoek detecteert, wordt het gewoonlijk blokkeert het standaard .

Origin=null wordt ingesteld wanneer u HTML-inhoud opent vanuit een lokale map en een verzoek verzendt. Dezelfde situatie is wanneer u een verzoek verzendt binnen een <iframe>, zoals in het onderstaande fragment (maar hier is de Host-header helemaal niet ingesteld) – in het algemeen , overal waar de HTML-specificatie ondoorzichtige oorsprong zegt, kun je dat vertalen naar Origin=null. Meer informatie hierover vind je op hier.

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

const express = require('express');
const request = require('request');
const app = express();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});
app.get('/fetch', (req, res) => {
  request(
    { url: req.query.url },
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).send('error');
      }
      res.send(body);
    }
  )
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

app.UseCors(options => options.AllowAnyOrigin());

[EnableCors("AllowOrigin")]

[Route("something/{somethingLong: long}")] //Space.

[Route("something/{somethingLong:long}")] //No space

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