cURL erzwingt keine CORS-Regeln. Diese Regeln werden von Browsern aus Sicherheitsgründen durchgesetzt.

Wenn Sie erwähnen, dass Sie den entsprechenden Header hinzugefügt haben, meinen Sie, dass Sie diese Header der Anfrage hinzugefügt haben. Tatsächlich wird der Header in den Antwortheadern des Servers erwartet, der angibt, dass auf die Ressource von anderen Websites direkt zugegriffen werden darf.

Zu Ihrer Information, CORS - Cross-Origin-Ressourcenfreigabe. Da Ihre API dies nicht unterstützt, haben Sie zwei Möglichkeiten:

1. Verwenden Sie einen Proxy-Server in derselben Domain wie Ihre Webseite, um auf die API von 4chan zuzugreifen, oder
2. Verwenden Sie einen Proxyserver in einer anderen Domäne, ändern Sie jedoch die Antwort so, dass sie die erforderlichen Header enthält.

Ich möchte dafür stimmen, dieses Thema als "Kein Problem" zu schließen.

Vielen Dank für den Vorschlag. Ich habe meinen Code aktualisiert, um die Anfrage über einen Proxy zu leiten:

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

Allerdings bekomme ich immer noch diesen Fehler:

Cross-Origin Request Blocked: Die Same Origin Policy verbietet das Lesen der Remote-Ressource unter https://a.4cdn.org/a/threads.json. (Grund: CORS-Header 'Access-Control-Allow-Origin' stimmt nicht mit 'https://boards.4chan.org' überein).

Ich habe verschiedene Foren und Fragen zu Stack Overflow durchsucht und kann keine Lösung dafür finden. Wäre dankbar, wenn jemand einen Einblick geben könnte.

Gibt es darüber irgendwelche Neuigkeiten? Ich sitze so ziemlich im selben Boot...

Cross-Origin Request Blocked: Die Same Origin Policy verbietet das Lesen der Remote-Ressource unter https://a.4cdn.org/a/threads.json. (Grund: CORS-Header 'Access-Control-Allow-Origin' stimmt nicht mit 'https://boards.4chan.org' überein).

Dies liegt daran, dass https://a.4cdn.org und https://boards.4chan.org als unterschiedliche Domänen betrachtet werden. Der Unterschied liegt in a und Boards

Ich habe auch das gleiche Problem. Kann mir bitte jemand dabei helfen

saaaaame

Als vorübergehende Lösung können Sie dies verwenden: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Ich habe bisher nichts besseres gefunden..

@PetitBateau Ich bin mir nicht sicher, wie die Chrome-Erweiterung beim Senden von Anfragen über Axios helfen würde.

@adl1995 Es hat mir

Eine Chrome-Erweiterung hilft nur für diejenigen, die die Erweiterung haben. Abhängig von der Chrome-Erweiterung in der Produktion ist keine gute Idee, da nicht jeder diese Erweiterung hat.

Deshalb sagte ich, es sei eine vorübergehende Lösung. Und natürlich für eine Entwicklungsumgebung.

Access-Control-Allow-Origin ist ein Response-Header, kein Request-Header:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get(url, { headers: {'Access-Control-Allow-Origin': *} } ) bedeutet nichts!

Versuchen
axios.get(url, { crossdomain: true })

@ronnin Fürs Protokoll habe ich Ihre Lösung ausprobiert, aber sie funktioniert nicht.

Der Remotedienst, an den Sie Ihre AJAX-Anfrage stellen, akzeptiert keine ursprungsübergreifenden AJAX-Anfragen von Ihrer Domain. Wenn Sie Zugriff auf die serverseitige Codebasis Ihrer Website haben, können Sie beispielsweise dort eine Controller-Aktion erstellen (vorausgesetzt, Sie verwenden einen MVC) und dann den Remote-Dienst nutzen. Sie können dann AJAX-Anfragen an Ihre Controller-Aktion stellen. Ein Vorteil dieses Ansatzes besteht darin, dass Sie zusätzliche Überprüfungen durchführen können, bevor Sie den Remote-Service kontaktieren, seine Antwort formatieren und sogar zwischenspeichern.

Lesen Sie dies, alle.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Ich finde immer einen Verweis auf dieses MDN-Dokument nicht sehr hilfreich. Es ist ein langes Dokument und geht nicht direkt auf die vorliegende Frage ein. Was mache ich, wenn ich keinen Zugriff auf die serverseitige Codebasis habe und auf diese API zugreifen möchte?

Meine Lösung besteht darin, meine eigene API auf meinem Domänenserver zu erstellen, um auf jede fremde API zuzugreifen, die keine ursprungsübergreifenden Anfragen zulässt. Ich nenne sie meine Repeater-API.

@JigzPalillo Können Sie den Ansatz oder Code teilen? Ich stecke ziemlich fest! :(

Normalerweise würde dies funktionieren, aber falls dies nicht der Fall ist und Sie keinen Zugriff auf diese Domain haben...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

Ich habe einen Repeater auf meinem Server erstellt

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

Der Server muss auf den Optionsaufruf mit CORS-Headern antworten. Wenn Sie nodejs/express verwenden, können Sie dies für alle Endpunkte beheben mit:

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

Aber das ist ein bisschen locker. Will wahrscheinlich für die Produktion straffen.

Das Problem habe ich aber schon lange gelöst. Der Server gehört zu einem 3p-Dienst und liegt daher außerhalb meiner Kontrolle. Ich habe es stattdessen einfach per Proxy weitergeleitet. An dieser Front ist alles in Ordnung.

Vielen Dank

@steveswork gleiches hier, Server gehört zu einem 3p-Dienst, ziemlich traurig, dass ich Ajax verwenden kann, request.js aber nicht Axios, was ich bevorzuge

@adl1995 kann man dieses Problem schon beheben? Ich bin total verwirrt, wie man mit diesem Fehler umgeht

es ist jetzt 2018, gibt es ein Update?

@challenger532 Nein, immer noch nicht.

Der Fehler ist immer noch weit verbreitet.

Mein Rat: Verwenden Sie eine andere Bibliothek .

Okay, das hat mein Problem irgendwie gelöst. Sie sehen, ich arbeite mit vuejs und Laravel... Ich habe meine Laravel-Webroute in PHP wie folgt eingerichtet:

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

dann vuejs-Datei habe ich einfach Axios verwendet, um eine Anfrage an meine Route zu senden:

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

und voila, es funktioniert einwandfrei.

bei Verwendung von Laravel, Additionsfunktion:

header('Access-Control-Allow-Origin: *');

an den Controller oder die Route vor der Rückkehr
Beispiel:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
Entschuldigung für mein Englisch. Hoffe das kann dir helfen.

Ich verwende vue.js (localhost port 8080) und Flask für meine API (localhost port 5000)

Ich musste einfach eine kleine Änderung in meinem API-Code vornehmen (Flask auf Port 5000).
Ich habe die Kolbenerweiterung Flask-CORS hinzugefügt und meinen Code geändert, um ihn zu verwenden.
Vor:

from flask import Flask, request
import json
app = Flask(__name__)

Nach:

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

Danach funktionierte es und ich konnte meine API verwenden.
Es ist also nicht wirklich ein axios-Problem, sondern ein API-Problem und Sie erhalten eine Warnung von Firefox, wenn Sie die axios.get-Funktion nicht aufrufen.

Durch das Setzen der Header- und Proxy-Optionen habe ich stattdessen die Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. .

Aber das konnte ich mit dieser Erweiterung umgehen :

Leider hat das erst gestern funktioniert und heute nicht...ich habe versucht herauszufinden warum

Proxy- Anfragen mit Webpack- Entwicklungsserver, um _cors_ im Entwicklungsmodus zu vermeiden

Fügen Sie in Ihrer webpack.config-Datei hinzu

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

Das obige Beispiel wird die Anfrage weiterleiten
axios.post(/api/posts/1 ... . . . .
zu https://my-target.com/posts/1

Das obige Git-Beispiel müssen Sie in Ihrer Anfrage so

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

In der Datei webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

Der modifizierte Webpack-Konfigurationsproxy ändert Ihre Anfrage wie folgt.

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

Sie können mehrere Pfade im devServer-Proxy wie folgt verwenden
In der Datei webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

Verwenden Sie, wenn Sie brauchen

    "changeOrigin": true,
    "secure": false

Ich habe Stunden damit verbracht, es zu reparieren und scheint überall keine Hilfe zu sein. Der einfache und schnelle Weg besteht darin, eine Chrome-Erweiterung namens Allow-Control-Allow-Origin* hinzuzufügen. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkhiljbi?hl=de

hilft nur dir, aber wie sieht es mit anderen Menschen aus?

Irgendwie nützlich: https://github.com/shalvah/cors-escape

Als ich Vue und Axios ausprobierte, hatte ich offensichtlich das gleiche Problem.

Habe gerade die von sundar6445 bereitgestellte Lösung ausprobiert und sie funktioniert perfekt.
Die von mir geänderte Webpack-Konfigurationsdatei ist in/config/index.js. Ich habe es vorgezogen, dieses zu ändern, da es in referenziert wurde/build/webpack.dev.conf.js

Darin findest du

module.exports = {
  dev: { 
...
proxyTable: {},

Wie von sundar beschrieben, ändern Sie die proxyTable zum Beispiel durch etwas wie

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

was bedeutet, dass alles, was mit /events beginnt, an http://localhost :3000/events weitergeleitet wird. In meinem Fall kein 'pathRewrite', die relative URL ist dieselbe.

Vergessen Sie natürlich nicht, die vollständige URL in Ihrer Vue-Komponente zu entfernen. Ich hatte:

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

es wird:

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

und es funktioniert einwandfrei. Danke an @sundar6445

Hoffe das hilft

Ich weiß, dass dies als geschlossen markiert ist, aber ich wollte auf etwas hinweisen. Manchmal wird dieser Fehler auf der Clientseite angezeigt, wenn Ihr API-Schlüssel entweder abgelaufen ist oder von einer anderen Person verwendet wird.

Dies mag für erfahrenere Entwickler selbstverständlich sein, aber für diejenigen, die neu in der Programmierung sind, stellen Sie sicher, dass Sie einen eindeutigen API-Schlüssel haben. Nicht alle APIs erfordern eindeutige Schlüssel, aber wenn ja, werden Sie sie sicherlich brauchen. Sehen Sie in der API-Dokumentation für Ihre spezifische API nach, um zu erfahren, was sie benötigen.

Es gibt keine Option als crossDomain innerhalb des Axios. Bitte studieren Sie den Quellcode, bevor Sie falsche Hinweise geben/verwenden.

Sie können kein JavaScript auf einem Client ausführen (ohne CORS zu deaktivieren und Sie zu einem Ziel für XSS zu machen), um Informationen von einer anderen Site abzurufen.

Dies soll verhindern, dass Sie ohne deren Erlaubnis Zugriff auf den Browser eines Kunden erhalten und möglicherweise dessen Bankkonten leeren oder auf einer Website posten. Das gleiche gilt für das Scraping von Sites (was im Wesentlichen das ist, was der Op versucht).

Sie können das Web mit einem Server mit einem CORS-Modul und einem Proxy über diesen Server durchsuchen (dh Daten abrufen).

Ich denke, diese Header-Konfiguration wird dieses Problem lösen.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

Vielen Dank

Ich weiß, das klingt nach Klischee, aber meine Lösung für dieses Problem besteht darin, eine benutzerdefinierte API zu erstellen, um diese Anrufe zu verarbeiten.

Das Problem liegt nicht bei Axios. Das Problem liegt beim Server. Wenn Sie Daten bereitstellen, müssen Sie die folgenden Header hinzufügen, bevor Sie sie senden.

Access-Control-Allow-Origin muss auf * gesetzt sein

Access-Control-Allow-Headers müssen auf Origin, X-Requested-With, Content-Type, Accept eingestellt sein

Quelle: CORS-Fehler beim Aufrufen von axios.get

In Bezug auf diese Antwort habe ich diese Zeilen zu meinem Back-End-Express-Server hinzugefügt, wie folgt:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

Quelle: CORS auf ExpressJS

Und bei mir funktioniert alles gut, ohne zusätzliche Konfiguration auf Axios oder im Frontend, also ist es wirklich kein Axios-Problem, sondern eine fehlende serverseitige Header-Konfiguration.

Schließlich denke ich, dass diese andere Antwort auf stackoverflow das Thema ziemlich gut

So vermeiden Sie den CORS-Preflight
So verwenden Sie einen CORS-Proxy, um Probleme mit dem "No Access-Control-Allow-Origin-Header" zu umgehen
So beheben Sie das Problem „Access-Control-Allow-Origin-Header darf nicht der Platzhalter sein“

ich hoffe es hilft.

Wenn Sie Daten von einer API oder URL eines Drittanbieters abrufen möchten, die ein Problem mit ihrem CORS-Header hat (fehlt oder enthält mehrere Werte), denke ich, die einzige Lösung dafür ist, diesen Link zu verwenden
" https://cors-anywhere.herokuapp.com/ "
Ich verwende den Link für kleine Projekte, aber für große Projekte möchten Sie vielleicht Ihre eigene API erstellen, um die Anrufe zu bearbeiten und die API zu erstellen, können Sie das Open-Source-Projekt https://github.com/Rob--W/cors-anywhere verwenden / .

Dieser wird funktionieren:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Ich bin vor einiger Zeit auf dieses Problem gestoßen, als ich 4webm und 4chan-list-webm erstellt habe

Es ist erwähnenswert, dass Sie, wenn Sie ein Browser-Plugin erstellen, nicht mit den Headern spielen müssen, um die API zu erreichen. Wenn wir @moot rufen,

Domänenübergreifend: wahr

Ich musste den Port '8080' auf dem Backend CORS aktivieren und dann hat es funktioniert.

sicher

Webpack-Dokumentation zum besseren Verständnis: https://webpack.js.org/configuration/dev-server/#devserver -proxy

Wenn Sie Laravel oder Lumen für Ihre Backend-API verwenden. Und Sie verwenden bereits das Paket barryvdh/laravel-cors. Die Lösung besteht darin, Ihre cors.php-Konfiguration als Header, Methode und Ursprungsteil wie folgt festzulegen
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
Hoffentlich löst es das Problem von jemandem

Wenn Sie dies in Safari tun, dauert es keine Zeit. Aktivieren Sie einfach das Entwicklermenü unter Voreinstellungen >> Erweitert und wählen Sie "Cross-Origin-Einschränkungen deaktivieren" aus dem Entwicklungsmenü. Wenn Sie nur lokal möchten, müssen Sie nur das Entwicklermenü aktivieren und im Entwicklungsmenü "Lokale Dateibeschränkungen deaktivieren" auswählen.

und in Chrome für OSX Terminal öffnen und ausführen:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir erforderlich unter Chrome 49+ unter OSX

Für Linux-Lauf:

$ google-chrome --disable-web-security
Auch wenn Sie versuchen, auf lokale Dateien für Entwicklungszwecke wie AJAX oder JSON zuzugreifen, können Sie dieses Flag auch verwenden.

-–allow-file-access-from-files
Gehen Sie für Windows in die Eingabeaufforderung und gehen Sie in den Ordner, in dem sich Chrome.exe befindet, und geben Sie ein

chrome.exe --disable-web-security
Das sollte die gleiche Ursprungsrichtlinie deaktivieren und Ihnen den Zugriff auf lokale Dateien ermöglichen.

Habe alle oben genannten Lösungen ausprobiert. nichts funktioniert.
endlich einen gefunden - https://github.com/expressjs/cors
ich hoffe es hilft euch

Das Hauptproblem ist der Unterschied zwischen Serveranforderungen und Clientanforderungen.

Wenn Sie Anfragen über den Client (meistens einen Browser) stellen, sind Sie der Browser-Software ausgeliefert. Der Standard für Browsersoftware besteht darin, alle Versuche bösartiger Aktivitäten zu verhindern, die von Ihrer eigenen Software stammen oder nicht.

Wenn Sie eine Anfrage von Ihrem eigenen Server (auch kein Browser-Client) stellen, dann ist für den von Ihnen selbst geschriebenen Code Folgendes gegeben, niemand (abhängig von Ihren Servereinstellungen) kann darauf zugreifen oder ihn kontrollieren, und Sie wissen was Arten von Anforderungen sind ausgehend, sodass keine Bedenken hinsichtlich Netzwerkanrufen außerhalb Ihrer Umgebung oder Ihres Wissens bestehen.

Aus diesem Grund gehen Browser streng bei Cross-Origin-Anfragen vor, insbesondere da Sie, sobald Ihr öffentlicher Code auf dem Client ist, weniger Kontrolle darüber haben, wer ihn sieht / wer ihn manipulieren kann. Für den Fall, dass Ihre Frontend-Anwendung kompromittiert ist und eine bösartige Software in der Lage ist, Netzwerkabrufe von Ihrem Code auf Kosten Ihrer Besucher/Benutzer durchzuführen, möchten diese sicherstellen, dass dies nicht passieren kann. Daher kann Ihre mydomain.com keine Anrufe an allyourdataarebelongtome.com tätigen, nur für den Fall, dass Sie dies nicht gewollt haben.

Die Lösung hier ist nicht, dass domänenübergreifende Anfragen nicht funktionieren - es liegt daran, dass entweder Ihr eigener Server dies verhindert und Sie diesen Umstand beim Akzeptieren Ihrer Ursprungsdomäne berücksichtigen müssen, oder dass der Drittanbieter-Server, an den Sie versuchen, API-Aufrufe zu tätigen hat eine andere Authentifizierungs-/Autorisierungsmethode zusätzlich zu dieser domänenübergreifenden Anfrage.

@mddanishyusuf Lösung hat bei mir funktioniert.

Ich denke, diese Header-Konfiguration wird dieses Problem lösen.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

Vielen Dank

Vielen Dank! ;)

Von hier aus: https://github.com/axios/axios Ich habe festgestellt, dass keine vollständige URL in die Axios-URL-Anforderung eingefügt wird.

Also versuche ich, dies zu lösen, indem ich meine eigene API auf meiner Website erstelle. Ich habe gerade eine Anfrage wie diese gesendet

axios.get('/sample/request')

dann sendet http://127.0.0.1 :8080/sample/request eine weitere Anfrage an https://a.4cdn.org/ und gibt Antworten als json an axios zurück.

Es ist Arbeit für mich, ich hoffe es kann dir helfen

https://github.com/axios/axios/issues/853#issuecomment -408218917 funktionierte mit fetch API und einer .NET 4.5 Web-API.

Soweit ich weiß , besteht das Problem darin, dass eine Anfrage von loclahost:8080 gesendet wird und der Browser solche Anfragen wie CORS ablehnt. Die Lösung bestand also darin, einen Proxy zu erstellen, und der Browser verarbeitet Anfragen, wenn sie von einem Server verschwunden sind.
Korrigiere mich, wenn ich falsch liege

Meine Lösung war:
Proxy von 'http-proxy-middleware' importieren
app.use('/api/**', proxy({ target: "http://localhost:8080" }));

Ich hatte das gleiche Problem und löse es, indem ich 'cors' in meinem Backend (Express) installiere.

Lauf:
npm install cors

Dann stell einfach das ein:

var cors = require('cors');
app.use(cors());

Danke @fernandoruch , das funktioniert mit meinem nodejs-Server

Ich hatte das gleiche Problem und habe es gelöst

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

funktionierte zuerst, aber dann hörte es auf und ich konnte nicht herausfinden warum.

dann habe ich festgestellt, dass ich meinen gesamten Code in eine andere Datei verschoben habe, sodass ich den Router verwenden muss:

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Hi,

Bei jedem Update zu diesem Problem verwende ich .net Core 2.1 und Axios 0.18.

Vielen Dank.

Ich glaube nicht, dass das Problem bei Axios liegt, sondern bei Ihrem Back-End-Server.

Für mich habe ich eine Architektur mit Flask im Back-End und verwende Axios in Vue.JS, das einzige, was ich auf meinem Flask-Server tun musste, ist:

...
from flask_cors import CORS
...
CORS(app)

Dies sollte jedoch nicht in die Produktion gehen, Sie können auch eine ursprungsübergreifende Zulassungsliste auf nginx-Ebene erstellen. Ich lese diese , könnte hilfreich sein.

Als vorübergehende Lösung können Sie dies verwenden: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Ich habe bisher nichts besseres gefunden..

Schlechte Idee

Ich stieß auf dieses Problem, als ich versuchte, einfach eine axios.get() Anfrage an die Darksky-Wetter-API zu senden. Als ich die FAQ-Seite von Darksky durchlas, fand ich eine Frage zu genau diesem Problem. Sie antworteten, dass sie dies als Sicherheitsmaßnahme verwendet hätten, um unbeabsichtigten böswilligen Zugriff auf ihre Informationen zu verhindern, und schlugen vor, einen Proxy für den Zugriff auf ihre Datenbank zu erstellen.

Ich habe die folgende Änderung an meiner package.json Datei vorgenommen (ich verwende create-react-app):

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKey wurde mir von Darksky zur Verfügung gestellt, um auf ihre Daten zuzugreifen.

Dies war eine super einfache Lösung und hat für mich funktioniert! Ich würde vermuten, dass viele API-Dienste dies als Sicherheitsmaßnahme verwenden werden. Hoffentlich kann meine Lösung anderen mit ähnlichen Problemen helfen.

Zusammengefasst: Erstellen Sie einen Proxy.

Danke @fernandoruch . Es funktioniert für mich, wenn ich es zu app.js meines node.js-Servers hinzufüge

var cors = require('cors');
app.use(cors());

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

JSONP (JSON with Padding oder JSON-P) wird verwendet, um Daten von einem Server anzufordern, der sich in einer anderen Domäne befindet als der Client. JSONP ermöglicht die gemeinsame Nutzung von Daten unter Umgehung der Same-Origin-Richtlinie.

Ich verwende nur $.get von jquery für externe API-Aufrufe.

Wenn Sie Daten von einer API oder URL eines Drittanbieters abrufen möchten, die ein Problem mit ihrem CORS-Header hat (fehlt oder enthält mehrere Werte), denke ich, die einzige Lösung dafür ist, diesen Link zu verwenden
" https://cors-anywhere.herokuapp.com/ "
Ich verwende den Link für kleine Projekte, aber für große Projekte möchten Sie vielleicht Ihre eigene API erstellen, um die Anrufe zu bearbeiten und die API zu erstellen, können Sie das Open-Source-Projekt https://github.com/Rob--W/cors-anywhere verwenden / .

Dieser wird funktionieren:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

@yasincidem - Du bist ein absoluter Diamant für diesen Vorschlag. Cheers - ich bin auf der Suche nach einer Lösung vielen Pfaden im Internet gefolgt und Ihre ist die erste, die für mein spezielles Szenario funktioniert hat.

Ich bin gerade über dieses Thema gestolpert. Ich hatte {withCredentials: true} (eine Kopie und Einfügung von meiner anderen API), damit diese spezielle API von Drittanbietern funktionierte. Ich musste einfach {withCredentials: true} entfernen

Diese Lösung funktioniert für mich

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

Referenz https://stackoverflow.com/questions/42422494/cross-domain-at-axios

Wenn Sie Daten von einer API oder URL eines Drittanbieters abrufen möchten, die ein Problem mit ihrem CORS-Header hat (fehlt oder enthält mehrere Werte), denke ich, die einzige Lösung dafür ist, diesen Link zu verwenden
" https://cors-anywhere.herokuapp.com/ "
Ich verwende den Link für kleine Projekte, aber für große Projekte möchten Sie vielleicht Ihre eigene API erstellen, um die Anrufe zu bearbeiten und die API zu erstellen, können Sie das Open-Source-Projekt https://github.com/Rob--W/cors-anywhere verwenden / .

Dieser wird funktionieren:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Außergewöhnlich es funktioniert !!!

Dieses Problem ist auch beim Wechsel zu Axios aufgetreten
unser Setup ist Webpack + DevServer (mit Proxy) + Axios

Das Problem war, dass wir unsere vollständige API-URL als baseURL in Axios verwendet haben, anstatt nur '/api' (der Proxy macht die Zuordnung über das Zielattribut)

Meiner Meinung nach könnte dies an unseren eigenen Fehlern liegen. Ich habe das gleiche Problem wie oben. 2 Tage habe ich mir die Zeit genommen nach diesem Problem zu suchen. Es stellt sich heraus, dass es nur ein kleines Problem ist, das ich gefunden habe. die von mir eingegebene URL-Adresse stimmt nicht mit der Parse-Dokumentation überein. und jetzt funktioniert axios perfekt auf meinem eckigen 7

Überprüfen Sie, ob auf dem Kolben oder einem anderen Server CORS aktiviert ist.
Überprüfen Sie auch, ob die Serveradresse korrekt ist. Ich blieb hängen, nur weil ich vergessen habe, den Port des Servers hinzuzufügen.
axios.get('http://localhost:5000/jsonshow')
.then(Antwort => (this.array=Antwort))

Ändern Sie " localhost:3000 " in " http://localhost :300" funktioniert bei mir einwandfrei (stellen Sie sicher, dass Cors serverseitig aktiviert ist)

Ändern Sie " localhost:3000 " in " http://localhost :300" funktioniert bei mir einwandfrei (stellen Sie sicher, dass Cors serverseitig aktiviert ist)

wenn Sie auf Port 300 und nicht auf 3000 laufen.

in VueJS Sie eine Abscheulichkeit namens vue.config.js im Stammverzeichnis des Projekts erstellen, wenn sie nicht existiert, und etwas hinzufügen wie

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

Dann sollte Ihr Axios Anruf aussehen

axios.get('/api/say_hello', {})

Wenn Sie Daten von einer API oder URL eines Drittanbieters abrufen möchten, die ein Problem mit ihrem CORS-Header hat (fehlt oder enthält mehrere Werte), denke ich, die einzige Lösung dafür ist, diesen Link zu verwenden
" https://cors-anywhere.herokuapp.com/ "
Ich verwende den Link für kleine Projekte, aber für große Projekte möchten Sie vielleicht Ihre eigene API erstellen, um die Anrufe zu bearbeiten und die API zu erstellen, können Sie das Open-Source-Projekt https://github.com/Rob--W/cors-anywhere verwenden / .

Dieser wird funktionieren:

axios.get( ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json )
.dann(res => {
Konsole.log(res)
})

Dieser hat bei mir funktioniert! Vielen Dank!

Probier diese :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

Wenn Sie Daten von einer API oder URL eines Drittanbieters abrufen möchten, die ein Problem mit ihrem CORS-Header hat (fehlt oder enthält mehrere Werte), denke ich, die einzige Lösung dafür ist, diesen Link zu verwenden
" https://cors-anywhere.herokuapp.com/ "
Ich verwende den Link für kleine Projekte, aber für große Projekte möchten Sie vielleicht Ihre eigene API erstellen, um die Anrufe zu bearbeiten und die API zu erstellen, können Sie das Open-Source-Projekt https://github.com/Rob--W/cors-anywhere verwenden / .

Dieser wird funktionieren:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Spart mir Zeit, vielen Dank!

@ronnin Fürs Protokoll habe ich Ihre Lösung ausprobiert, aber sie funktioniert nicht.

Was? Wirklich? Bei mir hat es auf jeden Fall funktioniert...
Für die GET-Methode, funktioniert wie ein Zauber!

Hier ist das Beispiel, das ich mit einer öffentlichen API erstellt habe, basierend auf dem @ronnin- Kommentar:
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

es ist jetzt 2019, gibt es ein Update? 😃

Ich verwende diese Chrome-Erweiterung für die Entwicklung meiner App
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin Fürs Protokoll habe ich Ihre Lösung ausprobiert, aber sie funktioniert nicht.

Männer, die in Schwierigkeiten sind, sind bei CORS nicht gut anerkannt und sollten den bereits erwähnten Artikel @seungha-kim lesen: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Als Zusammenfassung:

1. Remote-Ressourcen, die Sie angefordert haben, müssen, wenn sie sich nicht auf demselben Host befinden wie die Anforderung von (sogenannter: Ursprung), einen zusätzlichen CORS-Header zusammen mit der Ressource bereitstellen, auch bekannt als. Zugriffskontrolle zulassen: Host (Ursprung), Header, Methoden usw.
2. Anfragen per Browser oder curl mit Header 'Access-Control-Request-Method' , Anfragen mit Methode 'OPTIONS' werden zuerst automatisch vor der beabsichtigten Methode versucht: 'GET', 'POST', etc.
   was bedeutet, dass die Handler von Remote-Ressourcen die Methode 'OPTION' speziell behandeln müssen. zum Beispiel (nginx):
   ```groovig
   Standort /die-entfernte-Ressource {
   if ($request_method = 'OPTIONS') {
   add_header 'Zugriffskontrolle-Zulassen-Herkunft' $http_origin;
   add_header 'Access-Control-Allow-Headers' 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Seit,Cache-Control,Content-Type,Authorization';
   add_header 'Zugriffskontrolle-Zulassen-Methoden' 'OPTIONEN, GET, POST, PUT, PATCH, DELETE';
   add_header 'Access-Control-Allow-Credentials' true;
   add_header 'Zugriffskontrolle-Max.-Alter' 1728000; # 20d

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
```

1. Wie oben erwähnt, habe ich nicht den Wert * für jeden Access-Control-Allow-*-Header verwendet.
   Wert *, hat viele Einschränkungen.
   A. Wert * to Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods funktioniert nicht mit Access-Control-Allow-Credentials=true. Wenn ein Cookie mit der Anfrage erforderlich ist, benötigen Sie Access-Control-Allow-Credentials=true
   B. nur * ist gültig, *.google.com ist UNGÜLTIG

1. Access-Control-Allow-Headers ist eine Liste von Headern Ihrer Anfrage möglicherweise zusammen mit. Das Vorhandensein einiger Header, die nicht darin aufgeführt sind, führt dazu, dass Sie blockiert werden. Überprüfen Sie einfach die Header und aktivieren Sie sie in Access-Control-Allow-Headers

2. Das Problem liegt meistens nicht im Client (Browser, Ihre Client-App), sondern in der vom Server angeforderten Ressource.

3. Sprich mit deinem serverseitigen Entwicklerkollegen

Hoffe es ist hilfreich

@ronnin : Wenn ich Ihre Punkte richtig verstehe, bedeutet dies, dass, wenn meine GET-Anforderung Ressourcen von einem Server anfordert, auf dem CORS nicht aktiviert ist, im Grunde nichts, was wir vom Frontend aus tun können, oder?

@ronnin : Wenn ich Ihre Punkte richtig verstehe, bedeutet dies, dass, wenn meine GET-Anforderung Ressourcen von einem Server anfordert, auf dem CORS nicht aktiviert ist, im Grunde nichts, was wir vom Frontend aus tun können, oder?

Verwenden Sie die folgende App unten, damit Ihre Anfragen funktionieren

Bei mir hat es funktioniert, obwohl der Server CORS nicht aktiviert hat

https://cors-anywhere.herokuapp.com/

Verwendungszweck :

URL = https://cors-anywhere.herokuapp.com${url} ;
`

@ronnin : Wenn ich Ihre Punkte richtig verstehe, bedeutet dies, dass, wenn meine GET-Anforderung Ressourcen von einem Server anfordert, auf dem CORS nicht aktiviert ist, im Grunde nichts, was wir vom Frontend aus tun können, oder?

Wenn meine GET-Anfrage Ressourcen von einem Server anfordert, der CORS nicht aktiviert hat, können wir im Grunde nichts direkt vom Front-End über die XHR-Anfrage (auch bekannt als AJAX-Anfrage) tun. Jawohl!
Es ist der Browser, der dem Protokoll folgt und Ihre Anfrage ablehnt.
Sie können die Ressource jedoch durch herkömmliche Browseranfragen abrufen, z. B. location.href, iframe, form.action

Meistens richten wir einen eigenen Reverse-Proxy-Server (wie nginx) mit selbstgesteuerter Serverseite ein, um das Problem der Anforderung einer dritten Ressource ohne aktiviertes CORS zu lösen.
Die Heroku-App, @ndjerrou erwähnt, ist der Fall.

wir haben selbstfahrende Autos und KI, kämpfen aber immer noch mit CORS

Ich habe es geschafft, dies mit heroku als Proxy zu lösen.

Hier ist mein Code;

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

es ist jetzt 2020, gibt es ein Update? 😃

Kann bestätigen, es ist 2020 und immer noch kein Update.
fetch() hat den mode: 'no-cors' Modus, warum hat Axios nicht einfach etwas Ähnliches?

Ich habe es versucht

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

Und keiner dieser Header hat funktioniert. Ich habe withCredentials sowohl bei true als auch bei false ausprobiert, hat nicht funktioniert.

Mit holen funktioniert es einfach.

Was soll ich tun, wenn ich mich nicht mit der CORS-Richtlinie befassen und trotzdem axios verwenden möchte?
Edit: Plus, warum zum Teufel ist dieses Problem geschlossen? Damit haben wir natürlich noch ein Problem.

Sie müssen 'Access-Control-Allow-Origin' definieren: 'YOUR_IP:YOUR_PORT' in den Response-Headern NICHT in den Request-Headern.

Kann bestätigen, es ist 2020 und immer noch kein Update.
fetch() hat den mode: 'no-cors' Modus, warum hat Axios nicht einfach etwas Ähnliches?

Ich habe es versucht

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

Und keiner dieser Header hat funktioniert. Ich habe withCredentials sowohl bei true als auch bei false ausprobiert, hat nicht funktioniert.

Mit holen funktioniert es einfach.

Was soll ich tun, wenn ich mich nicht mit der CORS-Richtlinie befassen und trotzdem axios verwenden möchte?
Edit: Plus, warum zum Teufel ist dieses Problem geschlossen? Damit haben wir natürlich noch ein Problem.

Es gibt kein Problem mit den Axios, deshalb wurde das Thema geschlossen. Nehmen Sie einfach einen Stuhl und lesen Sie den Artikel auf MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

南辕北辙, 徒劳无功

Danke Leute, das hat geholfen! Verzeihen Sie mir die Unannehmlichkeiten!

Ich hatte diesen Fehler bei Axios, als ich auf meinem mobilen Hotspot war. Als ich dann das WLAN in einem Café benutzte, bekam ich kein CORB

Ich habe versucht, die Wikipedia-API zu verwenden und hatte das gleiche Problem.
Das Hinzufügen von origin=* zur URL hat das Problem behoben.

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

Ich habe es gelöst, indem ich keine Axios verwendet habe, habe GET von externen URLs mit $ajax und $get ausprobiert, hatte kein Problem mit dem alten Jquery-Zeug. Es ist auf jeden Fall ein BUG.

Es ist 2021, gibt es ein Update? 😃

Ich habe ein ähnliches Problem im Zusammenhang mit "Access-Control-Allow-Headers" beim Versuch, einen Zapier-Webhook von Axios (0.18.0) und Chrome (75.0.3770.100) zu erreichen.

Meine Bitte ist:

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

Ich erhalte eine Fehlermeldung zum nicht unterstützten Header:

durch CORS-Richtlinie blockiert: Der Inhaltstyp des Anforderungsheaderfelds ist von Access-Control-Allow-Headers in der Preflight-Antwort nicht zulässig

Nach dem Durchlesen dieser Seite habe ich folgendes Verständnis:

• 1. Zapier muss seine Serverantwort konfigurieren, um Access-Control-Request-Headers für mindestens "content-type" zu unterstützen.
• 1. Ich muss meine Anfrage so konfigurieren, dass die Header-Überprüfung des "Inhaltstyps" während des Preflight-OPT irgendwie ausgeschlossen wird.

Gibt es Vorschläge, um Option 2 zu erreichen? Zapiers häufige Probleme mit Access-Control-Request-Headers legen nahe, dass Sie den Inhaltstyp Ihrer Anfrage nicht anpassen. Ich habe jedoch keine Header-Optionen in meiner Anfrage und auch keine Standard-Header, die für Axios konfiguriert sind. Ich kann also nur davon ausgehen, dass dies am Ende von Axios implizit ist?

Bearbeiten: Ich bin überzeugt, dass dies wenig / nichts mit Axios zu tun hat, sondern eher schlechte Unterstützung von Zapiers Seite. Die Anfrage scheint zu funktionieren, nachdem zu einem GET mit URL-Parametern gewechselt wurde.

Nun, wenn in den FAQs erwähnt wird, dass Sie keine Inhaltstypparameter benötigen
könnte einfach das ol probieren
Var xhr = new XMLHTTPRequest() und versuche es so ohne Axios.

Ist Ihr Beitrag an den Webhook auf dem Client oder dem Server?

Am Di, 25.06.2019, 15:27 Uhr schrieb Pete Schmitz [email protected] :

Ich habe ein ähnliches Problem mit "Access-Control-Allow-Headers"
beim Versuch, einen Zapier-Webhook von Axios (0.18.0) und Chrome zu treffen
(75.0.3770.100).

Meine Bitte ist:

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

Ich erhalte eine Fehlermeldung zum nicht unterstützten Header:

durch CORS-Richtlinie blockiert: Inhaltstyp des Anforderungsheaderfelds ist nicht zulässig
von Access-Control-Allow-Headers in der Preflight-Antwort

[Bild: Bild]
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bcffe91f1.png

Nach dem Durchlesen dieser Seite habe ich folgendes Verständnis:

-
1. Zapier muss seine Serverantwort für den Support konfigurieren
Access-Control-Request-Header für mindestens "content-type"
-
1. Ich muss meine Anfrage so konfigurieren, dass die
"content-type" Header-Check während des Preflight OPT.

Gibt es Vorschläge, um Option 2 zu erreichen? Zapiers häufige Probleme
über Access-Control-Request-Header
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
schlägt vor, den Inhaltstyp Ihrer Anfrage nicht anzupassen. Wie auch immer, ich
habe keine Header-Optionen in meiner Anfrage und auch keine Standard-Header
axios konfiguriert, also kann ich nur davon ausgehen, dass dies auf axios 'Ende implizit ist?

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJ50KTNP
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

Gibt es darüber irgendwelche Neuigkeiten? Ich sitze so ziemlich im selben Boot.

@imranimu Das Problem ist eine Kombination aus dem von Ihnen verwendeten Browser und dem Server, an den Sie die Anfrage stellen. Axios kann nichts dagegen tun, es sei denn, der Browser stellt eine API bereit, die ihn die CORS-Prüfung ignorieren lässt.

Sie haben einige Möglichkeiten:

Wenn Sie den angeforderten Server kontrollieren, erlauben Sie ihm, auf alle OPTIONS Anfragen mit den folgenden Headern zu antworten:

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

Mit Express könnte dies etwa so aussehen, vor anderen Routen in Ihrer Middleware-Kette platziert:

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

Sie müssen außerdem einen Header Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> an die Antwort anhängen.

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

Einfach ausgedrückt weiß der Browser, wenn Sie eine Ressource von einem anderen Ursprung (Domäne) anfordern, und sendet daher eine Preflight-Prüfung (mit dem Anforderungstyp OPTIONS, nicht GET, POST usw.), um zu sehen, ob der Server sagt, dass es in Ordnung ist um die Anfrage zu erhalten. Dies ist eine grundlegende Browser-Sicherheitsmaßnahme, um die Wahrscheinlichkeit zu verringern, dass eine Drittanbieter-Website Ihre API verwendet - was Sie möglicherweise nicht möchten. Der obige Code sagt im Grunde nur, dass es für eine bestimmte Website in Ordnung ist, die API zu nutzen. Wenn es von allen Websites verwendet werden kann, würden Sie Access-Control-Origin: * festlegen.

Alternativ können Sie, wenn Sie den Server, an den Sie die Anfrage stellen, nicht kontrollieren, eine Route auf dem Server bereitstellen, der die Seite bereitstellt, der die Anfrage für Sie stellt (Proxys). Dies funktioniert, weil die verfügbar gemachte Route denselben Ursprung (Domäne) wie Ihre Anwendung hat, sodass die CORS-Richtlinie nicht erzwungen wird und der Server, auf dem Sie die Route verfügbar gemacht haben, kein Browser ist und daher keinen CORS-Fehler erhält.

@Aitchy13 der API-Server, mit dem ich mich verbinde, hat Access-Control-Origin: * , die Konsole gibt mir diesen Fehler wie in diesem Problem.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

Du sagst auch, um hinzuzufügen...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

... aber gilt Access-Control-Allow-Origin nur für Antworten und nicht für Anfragen?

Nicht unterstützt, wenn Access-Control-Allow-Origin : * ... sehr seltsam.

Hier sind einige der Antwortheader der API für einige Referenzen, um zukünftige mögliche Lösungen zu unterstützen:

(Dies ist eine OPTIONS Methodenanforderung vor der eigentlichen Anforderung, die aufgrund von CORS abgelehnt wird.)
ANTWORT-HEADER

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

Oder habe ich etwas falsch? Wollte meinen Laptop wegen dieses Problems halbieren.

Ich hatte das gleiche Problem, nach mehreren Versuchen, einige Lösungen getestet, keine funktionierte. erst nach dem Setzen des Proxys in der package.json.
fügt hinzu:
"proxy": "API-Adresse"
dass es die Kors umgeht.

@IkarosFeitosa Können Sie Ihre Konfigurations-Proxy-Konfiguration posten?

@zacharytyhacz Sie können keine Browser-Anmeldeinformationen senden, wenn der Server mit Access-Control-Allow-Origin: * antwortet.

Entweder:

1. Ändern Sie * in eine bestimmte Website-Adresse.
2. setze ...withCredentials: false im Parameter config/options der von Ihnen verwendeten axios-Anfragefunktion.
3. Setzen Sie die proxy-Eigenschaft im config/options-Parameter der von Ihnen verwendeten Axios-Anfragefunktion auf einen gültigen Proxy (Beispiel unten).

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

Irgendein Fortschritt? Ich konfiguriere meinen Webserver, um den Resposne-Header festzulegen, aber es scheint nicht zu funktionieren.

Ich verwirre diesen Fehlertipp:

CORS sollte ein Webbrowser-Limit sein, es muss die Serverrückgabe zulassen, ich erlaube dieses Cors bereits, aber dann sagte mir der Browser No 'Access-Control-Allow-Origin' header is present on the requested resource .

Ich versuche meine Server-Cors-Konfiguration mit Fetch-API, es funktioniert gut.

Wenn Sie nodejs mit express . Dieser Beitrag könnte dir helfen.

Wenn Sie möchten, dass beispielsweise nur ein Pfad mit cors zulässig ist:
/home/fridge - aus anderen Quellen nicht erlaubt
/home/toilet - sollte von anderen Ursprüngen erlaubt sein

Sie können die folgende Implementierung ausprobieren (hat bei mir funktioniert)

In routen/home.js

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

Wenn Sie nodejs nicht mit Express verwenden , googeln Sie nach der OPTIONS Methodenanforderung

Getestet von Express: 4.16.3

Nein :) Es gibt Probleme bei der Entwicklung (wir verwenden http)
wenn wir auf dem Server veröffentlichen (wir verwenden https)
Es ist nicht passiert.
Also einfach Add-On installieren: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=de

app.use(function(req, res, next) {
res.header('Zugriffskontrolle-Erlauben-Ursprung', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
nächste();
});

Das hat mein Leben gelöst!!

Vielen Dank für den Vorschlag. Ich habe meinen Code aktualisiert, um die Anfrage über einen Proxy zu leiten:

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

Allerdings bekomme ich immer noch diesen Fehler:

Cross-Origin Request Blocked: Die Same Origin Policy verbietet das Lesen der Remote-Ressource unter https://a.4cdn.org/a/threads.json. (Grund: CORS-Header 'Access-Control-Allow-Origin' stimmt nicht mit ' https://boards.4chan.org ' überein).

Ich habe verschiedene Foren und Fragen zu Stack Overflow durchsucht und kann keine Lösung dafür finden. Wäre dankbar, wenn jemand einen Einblick geben könnte.

Hallo Leute, probiert das vor dem Axios-Aufruf aus, bei mir hat es funktioniert

headers.set('Content-Type', 'application/json')

das war meine lösung

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

Ich werde ein Video zur Behebung dieses CORS-Problems erstellen. Ich werde diesen Kommentar mit einem Link zu meinem YouTube-Video aktualisieren.

Bearbeiten:
https://youtu.be/hxyp_LkKDdk

Es ist 2021, gibt es ein Update? 😃

Ja, ich stehe so auf meinen Scheiß, dass ich diesen Jahresscheiß wirklich überprüfen musste 😆

Verwenden Sie einfach fetch , um zuerst zu testen, ob die Cors des Servers funktionieren.

Und...

axios kann meine koa-server anfordern, aber nicht iris direkt, beide rüsten beliebte Cors-Middleware aus.

1358

Warum gibt es keine offizielle Lösung für dieses Problem? Ich habe diesen ganzen Thread durchgelesen und bin verblüfft über ein scheinbar universelles Problem, das niemand wirklich auf Standard-Weise löst.

Warum gibt es keine offizielle Lösung für dieses Problem? Ich habe diesen ganzen Thread durchgelesen und bin verblüfft über ein scheinbar universelles Problem, das niemand wirklich auf Standard-Weise löst.

Das ganze CORS-Problem ist weder Axios noch JavaScript selbst. Es ist eine Sicherheitsfunktion, die in die meisten oder alle Browser integriert ist. Es gibt Möglichkeiten, es zu "hacken", aber es liegt am Server, mit den richtigen Headern zu antworten.

Warum gibt es keine offizielle Lösung für dieses Problem? Ich habe diesen ganzen Thread durchgelesen und bin verblüfft über ein scheinbar universelles Problem, das niemand wirklich auf Standard-Weise löst.

Das ganze CORS-Problem ist weder Axios noch JavaScript selbst. Es ist eine Sicherheitsfunktion, die in die meisten oder alle Browser integriert ist. Es gibt Möglichkeiten, es zu "hacken", aber es liegt am Server, mit den richtigen Headern zu antworten.

Was ist also angesichts dieser Antwort der "erfolgreichste" Weg, um einen Fix für ein CORS-Problem zu implementieren?

Okay, nach zwei Tagen Recherche habe ich es endlich hinbekommen.

Streng genommen ist dies kein axioses Thema. Eigentlich darf dies nicht einmal als Problem betrachtet werden. axios wurde entwickelt, um nach all diesen seltsamen und nervigen CORS-Standards zu arbeiten, daher wird die Meldung: CORS header ‘Access-Control-Allow-Origin’ missing erwartet, dass dies die korrekte Funktionsweise von axios ist. Im Beispiel mit der 4chan-API ist das Problem, wie bereits erwähnt, nicht axios, sondern die 4chan-API selbst, die nicht den CORS-Standards folgt.

Einige Leute haben den alten Trick vorgeschlagen, einen Proxy zu verwenden, um all die Überprüfungen von Headern zu vermeiden. Hier ist ein Blog von Negar Jamalifard, der erklärt, wie man den Trick macht: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 Übrigens , ich bin mir nicht sicher, ob dies als schlechte Praxis angesehen werden kann.

In meinem Fall habe ich zwei Tage lang versucht, eine Verbindung zu einer Asp-Netzkern-API in meinem eigenen Localhost herzustellen, bis ich merke, dass Axios vor dem Senden meiner Get-Anfrage automatisch eine "Preflight-Anfrage" sendet, die als OPTIONS-Methode gesendet wird, die mein Server war nicht bereit zu handhaben. Wenn jemand die Schuld daran gibt, ist Chrome und Firefox für die Anzeige einer so zweideutigen Nachricht verantwortlich.

Einige Leute haben den alten Trick vorgeschlagen, einen Proxy zu verwenden, um all die Überprüfungen von Headern zu vermeiden. Hier ist ein Blog von Negar Jamalifard, der erklärt, wie man den Trick macht: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 Übrigens , ich bin mir nicht sicher, ob dies als schlechte Praxis angesehen werden kann.

Also ist nur Proxying der bestmögliche Fall für diese Anrufe? Das ist eine Schande.

Also ist nur Proxying der bestmögliche Fall für diese Anrufe? Das ist eine Schande.

Nun ... Sie können auch versuchen, mit dem Typen zu sprechen, der die API erstellt hat, die Sie konsumieren möchten, und ihn bitten, das Problem zu beheben.

Ich habe das Problem gelöst:
für Axios: url= " http://localhost :8080" method='post'
für meine Django Server-Antwort:
uesrItem = {'Benutzer': 'xxx'}
Antwort = JsonResponse(userItem)
response["Access-Control-Allow-Origin"] = " http://localhost :8080"
response["Access-Control-Allow-Credentials"] = 'true'
response["Access-Control-Allow-Methods"] = "POST, OPTIONS"

Das Problem ist nicht Axios, sondern die API, die Sie anfordern!

Zum Beispiel wurde mir eine API in Flask codiert und die GET-Methode war:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

Aber das Problem wurde gelöst, wenn ich einen Header in der API-Antwort hinzufüge:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

Dann logge ich meine Axios-Antwort und bekomme sie:

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

Ich weiß nicht, welche API Sie alle verwenden, aber in Flask wurde es gelöst!

In meinem Fall war an Axios nichts auszusetzen. Ich habe gerade den Typen gefragt, der die API erstellt hat, um CORS serverseitig zu aktivieren.

Versuche dies

delete axios.defaults.headers.common["X-Requested-With"];

Ich habe den https://github.com/Rob--W/cors-anywhere-Workaround verwendet und funktioniert einwandfrei, aber in prod werde ich den Typen fragen, der die API erstellt hat, um Cors für meine Domain zu aktivieren

Ich glaube nicht, dass Sie CORS direkt in axios auflösen können, da CORS eine Browsereinschränkung ist, die zwischen Ihrem Browser und den Zielservern liegt.

Du kannst entweder:

1. Fügen Sie Access-Control-Allow-Origin in Ihre Antwortheader von Ihrem Zielserver ein .
2. Fügen Sie keinen Hostnamen in Ihre Axios-Anfrage ein, damit Ihr ursprünglicher Server angefordert wird. Dann können Sie von Ihrem ursprünglichen Server aus mit dem Zielserver tun, was Sie wollen.

Bitte erwähnen Sie ein detailliertes Beispiel-Code-Snippet.
Es wird hilfreich sein.

Ich hatte das gleiche Problem auf meinem lokalen.
Ich habe Cors in meinem Backend hinzugefügt und gelöst. :)

Dies ist nicht das Problem mit dem axios Dies ist das Problem mit dem Backend. Ich benutze Django. Und das Hinzufügen dieser beiden wird das Problem lösen.

CORS Middlewear hinzufügen

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

Und erlaubt die CORS.
(Zulassen von CORS für alle)

CORS_ORIGIN_ALLOW_ALL = True

(Dies ist etwas unsicher, da es alle Ursprünge zulässt. Dadurch wird es anfällig für CSRF-Angriffe.)
Daher für die Produktion nur für bestimmte Ursprünge zulassen

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

Beispiel :+1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

Hallo zusammen,
Wie bereits erwähnt, handelt es sich bei diesem Problem um einen Browserschutz gegen ursprungsübergreifende Anfragen. Ich habe es nach dieser Anleitung gelöst: https://support.google.com/chrome/thread/11089651?hl=de

Für diejenigen, die es immer noch schwer haben:
Hoffentlich haben Sie jetzt verstanden, dass dies kein Problem mit Axios ist und der Browser CORS blockiert, weil vom Server kein Header gesetzt wurde. Wenn Sie dies verstehen und immer noch Probleme damit haben, dass Ihr eigener Server die Header nicht festlegt, stellen Sie sicher, dass Sie ihn auf Ihrem tatsächlichen Webserver einstellen, wenn Sie einen Reverse-Proxy verwenden. Beispielsweise werden viele Node/Express-Apps von NGINX in der Produktion mit einem Reverse-Proxy bereitgestellt. Siehe enable-cors.org für die Einstellung in NGINX.

Für diejenigen, die es immer noch schwer haben:
Hoffentlich haben Sie jetzt verstanden, dass dies kein Problem mit Axios ist und der Browser CORS blockiert, weil vom Server kein Header gesetzt wurde. Wenn Sie dies verstehen und immer noch Probleme damit haben, dass Ihr eigener Server die Header nicht festlegt, stellen Sie sicher, dass Sie ihn auf Ihrem tatsächlichen Webserver einstellen, wenn Sie einen Reverse-Proxy verwenden. Beispielsweise werden viele Node/Express-Apps von NGINX in der Produktion mit einem Reverse-Proxy bereitgestellt. Siehe enable-cors.org für die Einstellung in NGINX.

Ich habe 3 Stunden gekämpft, auf der Client-Seite ändert sich nichts, schließlich habe ich die folgenden Sachen auf dem Server hinzugefügt:

installiere egg-cors (nur für Eierprojekte)

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

das ist alles

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

Verwenden Sie einfach fetch , um zuerst zu testen, ob die Cors des Servers funktionieren.

Und...

axios kann meine koa-server anfordern, aber nicht iris direkt, beide rüsten beliebte Cors-Middleware aus.

1358

Das hat bei mir funktioniert und muss lernen warum

Ich habe mit Tornado und Vuejs gearbeitet, Axios war nicht das Problem, auf meinem Backend hinzugefügt:

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

@robertjchristian
Es hat funktioniert
Verrrrrrrrrrry Danke

Ich habe das gleiche Problem
Mein Code
Axios ({
Methode: "holen",
URL: "http://localhost:4000/users",
})
.dann(Antwort => {
console.log (Antwort);
})
.catch(Fehler => {
Konsole.log(Fehler)
});
}
Bekomme diesen Fehler
Der Zugriff auf XMLHttpRequest unter ' http://localhost :4000/users' from origin ' http://localhost :3000' wurde durch die CORS-Richtlinie blockiert: Antwort auf Preflight-Anfrage besteht die Zugriffskontrollprüfung nicht: Nein 'Access-Control -Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden.

Kann mir jemand Schritt für Schritt eine Lösung geben, was ich tun soll?

@albertpinto Zunächst sollten Sie verstehen, dass Axios nicht das Problem ist, das von Ihnen verwendete "Backend" muss in der Lage sein, externe Daten zu empfangen. also in google kannst du suchen. so etwas wie _cors aktivieren (geben Sie die Sprache oder das Framework an, das Sie verwenden)_

@albertpinto schau dir alle möglichen Lösungen in diesem Mega-Thread an. Es ist kein clientseitiges / Front-End-Problem auf Ihrer Seite - es ist tatsächlich der Server (localhost:4000). Der Server muss mit CORS-Headern antworten, um den Ursprung zuzulassen.

Ihr Server sollte beispielsweise mit Headern antworten wie:

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

Ich habe das folgendermaßen gelöst:

1. Install cors npm : npm install cors (in meinem Fall auf deinem Rest-Node-Server http://localhost:4000)

Dies gilt auch für Ihren Endpunkt:
var cors = erfordern('cors')
var express = erfordern('express')
var cors = erfordern('cors')
var-App = express()
app.use(cors())

Danke für alle Vorschläge!

// Für CORS können Sie, wenn Sie express js verwenden, einfach das cors-Paket über npm verwenden.

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

cURL erzwingt keine CORS-Regeln. Diese Regeln werden von Browsern aus Sicherheitsgründen durchgesetzt.

Wenn Sie erwähnen, dass Sie den entsprechenden Header hinzugefügt haben, meinen Sie, dass Sie diese Header der Anfrage hinzugefügt haben. Tatsächlich wird der Header in den Antwortheadern des Servers erwartet, der angibt, dass auf die Ressource von anderen Websites direkt zugegriffen werden darf.

Zu Ihrer Information, CORS - Cross-Origin-Ressourcenfreigabe. Da Ihre API dies nicht unterstützt, haben Sie zwei Möglichkeiten:

1. Verwenden Sie einen Proxy-Server in derselben Domain wie Ihre Webseite, um auf die API von 4chan zuzugreifen, oder
2. Verwenden Sie einen Proxyserver in einer anderen Domäne, ändern Sie jedoch die Antwort so, dass sie die erforderlichen Header enthält.

Ich möchte dafür stimmen, dieses Thema als "Kein Problem" zu schließen.

@sunnykgupta
gleiche Logik, gleicher Text, aber eckige HTTP-Post-Anforderung an den Remote-Back-End-Endpunkt erhält keinen CORS-Blockfehler

Wenn Sie einen Go-Server laufen lassen, schlagen Sie vor, Gorilla zu verwenden

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

Ich habe das folgendermaßen gelöst:

1.Erstellen Sie eine vue.config.js Datei im Stammverzeichnis des Projekts direkt neben package.json, die Folgendes enthält:

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2. Machen Sie eine http-Anfrage wie folgt:

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get('https://a.4cdn.org/a/threads.json', {
Überschriften: {
'Zugriffskontrolle-Erlauben-Ursprung': '*',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
Stellvertreter: {
Host: '104.236.174.88',
Hafen: 3128
}
}).then(Funktion (Antwort) {
console.log('Antwort ist: '+Antwort.Daten);
}).catch(Funktion (Fehler) {
if (Fehler.Antwort) {
console.log(error.response.headers);
}
sonst if (error.request) {
Konsole.log(Fehler.Anfrage);
}
anders {
Konsole.log (Fehler.Nachricht);
}
console.log(error.config);
});

Hallo alle zusammen,
Ich poste das nur, da ich Stunden gebraucht habe, um das Problem zu lösen.

Zunächst einmal ist CORS definitiv ein serverseitiges und nicht clientseitiges Problem, aber ich war mir mehr als sicher, dass der Servercode in meinem Fall korrekt war, da andere Apps denselben Server auf verschiedenen Domänen verwendeten. Das Problem begann, als ich anfing, axios mit meiner benutzerdefinierten Instanz zu verwenden.

In meinem Fall war es ein sehr spezifisches Problem, wenn wir eine baseURL in einer axios Instanz verwenden und dann versuchen, GET oder POST von überall her anzurufen. axios fügt einen Schrägstrich / zwischen baseURL und der Anforderungs-URL hinzu. Das macht auch Sinn, aber es war das versteckte Problem. Mein Laravel-Server leitete um, um den abschließenden Schrägstrich zu entfernen, der dieses Problem verursachte.

Im Allgemeinen mag die Pre-Flight-Anfrage OPTIONS keine Weiterleitungen. Überprüfe das also auf jeden Fall und vermeide es.

Ich hoffe, das kann jemandem helfen, obwohl nichts davon ein Fehler ist.