Axios: Obtenir une « demande d'origine croisĂ©e bloquĂ©e » sur une requĂȘte GET

CrĂ©Ă© le 23 avr. 2017  Â·  143Commentaires  Â·  Source: axios/axios

Sommaire

Je fais une demande GET à l'API de 4chan pour récupérer les threads d'un tableau. C'est mon code :

const board = this.props.routeParams.tag;
var config = {
    headers: {'Access-Control-Allow-Origin': '*'}
};
axios.get('https://a.4cdn.org/' + board + '/threads.json', config)
    .then(function (response) {
        console.log(response.data);
});

Je reçois l'avertissement suivant :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://a.4cdn.org/a/threads.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Comme vu ci-dessus, j'ai ajoutĂ© l'en-tĂȘte correspondant, mais cela ne rĂ©sout pas le problĂšme. J'ai fait la mĂȘme demande depuis mon terminal en utilisant cURL et cela a bien fonctionnĂ©.

Le contexte

  • version axios : ex : v0.16.0
  • Environnement : par exemple : nƓud v6.9.4, Firefox 51.0.1, Ubuntu 14.04

Commentaire le plus utile

des nouvelles Ă  ce sujet? Je suis Ă  peu prĂšs dans le mĂȘme bateau...

Tous les 143 commentaires

cURL n'applique pas les rÚgles CORS. Ces rÚgles sont appliquées par les navigateurs à des fins de sécurité.

Lorsque vous mentionnez que vous avez ajoutĂ© l'en-tĂȘte pertinent, je suppose que vous voulez dire que vous avez ajoutĂ© ces en-tĂȘtes Ă  la demande. En fait, l'en-tĂȘte est attendu dans les en-tĂȘtes de rĂ©ponse du serveur, indiquant que la ressource est autorisĂ©e Ă  ĂȘtre consultĂ©e directement par d'autres sites Web.

Pour info, CORS - Partage de ressources d'origine croisĂ©e. Étant donnĂ© que votre API ne le prend pas en charge, vous avez deux options -

  1. Utilisez un serveur proxy sur le mĂȘme domaine que votre page Web pour accĂ©der Ă  l'API de 4chan ou,
  2. Utilisez un serveur proxy sur n'importe quel autre domaine, mais modifiez la rĂ©ponse pour inclure les en-tĂȘtes nĂ©cessaires.

J'aimerais voter pour clore ce problĂšme comme "Pas un problĂšme".

Merci pour la suggestion. J'ai mis Ă  jour mon code pour acheminer la requĂȘte via un proxy :

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

Cependant, j'obtiens toujours cette erreur :

Demande d'origine croisĂ©e bloquĂ©e : la politique de mĂȘme origine interdit la lecture de la ressource distante sur https://a.4cdn.org/a/threads.json. (Raison : l'en-tĂȘte CORS « Access-Control-Allow-Origin » ne correspond pas Ă  « https://boards.4chan.org »).

J'ai cherché dans divers forums et questions sur Stack Overflow et je n'arrive pas à trouver de solution à ce problÚme. Ce serait apprécié si quelqu'un pouvait donner un aperçu.

des nouvelles Ă  ce sujet? Je suis Ă  peu prĂšs dans le mĂȘme bateau...

Demande d'origine croisĂ©e bloquĂ©e : la politique de mĂȘme origine interdit la lecture de la ressource distante sur https://a.4cdn.org/a/threads.json. (Raison : l'en-tĂȘte CORS « Access-Control-Allow-Origin » ne correspond pas Ă  « https://boards.4chan.org »).

En effet, https://a.4cdn.org et https://boards.4chan.org sont considérés comme des domaines différents. La différence est dans un et des planches

Je reçois Ă©galement le mĂȘme problĂšme. Quelqu'un peut-il m'aider s'il vous plait

saaaaame

Comme solution temporaire, vous pouvez utiliser ceci : https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Je n'ai pas trouvé mieux pour le moment..

@PetitBateau Je ne sais pas comment l'extension Chrome aiderait Ă  envoyer des demandes via axios.

@adl1995 Cela a fait l'affaire pour moi ;)

Une extension Chrome n'est utile que pour ceux qui ont l'extension. Dépendre de l'extension Chrome en production n'est pas une bonne idée, car tout le monde n'a pas cette extension.

C'est pourquoi j'ai dit que c'était une solution temporaire. Et bien sûr pour un environnement de développement.

Access-Control-Allow-Origin est un en-tĂȘte de rĂ©ponse, pas un en-tĂȘte de demande :
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get(url, { headers: {'Access-Control-Allow-Origin': *} } ) ne veut rien dire !

essayer
axios.get (url, { domaine croisé : vrai })

@ronnin Pour mémoire, j'ai essayé votre solution, mais cela ne fonctionne pas.

Le service distant auquel vous faites votre demande AJAX n'accepte pas les demandes AJAX d'origine croisĂ©e de votre domaine. Une chose que vous pouvez faire si vous avez accĂšs Ă  la base de code cĂŽtĂ© serveur de votre site Web est de crĂ©er une action de contrĂŽleur Ă  cet endroit (en supposant que vous utilisez un MVC), puis de l'utiliser pour utiliser le service distant. Vous pouvez ensuite faire des requĂȘtes AJAX Ă  votre action de contrĂŽleur. Un bonus Ă  cette approche est que vous pouvez effectuer des vĂ©rifications supplĂ©mentaires avant de contacter le service distant, formater sa rĂ©ponse et mĂȘme la mettre en cache.

Je trouve toujours que la référence à ce document MDN n'est pas trÚs utile. c'est un long document et il n'aborde pas directement la question à portée de main. que dois-je faire si je n'ai pas accÚs à la base de code cÎté serveur et que je souhaite accéder à cette API ?

Ma solution consiste à créer ma propre API sur mon serveur de domaine pour accéder à toute API étrangÚre qui n'autorise pas les demandes d'origine croisée, je l'appelle mon API de répéteur.

@JigzPalillo Pouvez-vous partager l'approche ou le code ? Je suis quasiment bloqué ! :(

Normalement, cela fonctionnerait, mais dans le cas oĂč ce n'est pas le cas et que vous n'ayez aucun accĂšs Ă  ce domaine...

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

Ce que j'ai fait, c'est créer un répéteur sur mon serveur

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

Le serveur doit rĂ©pondre avec des en-tĂȘtes CORS lors de l'appel d'options. Si vous utilisez nodejs/express, vous pouvez rĂ©soudre ce problĂšme pour tous les points de terminaison avec :

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

Mais c'est un peu lĂąche. Vous voulez probablement resserrer pour la production.

J'ai résolu ce problÚme depuis longtemps. Le serveur appartient à un service 3p et est donc hors de mon contrÎle. Je l'ai simplement proxy à la place. Tout va bien de ce cÎté-là.

Merci

@steveswork mĂȘme ici, le serveur appartient Ă  un service 3p, assez triste que je puisse utiliser ajax, request.js mais pas axios que je prĂ©fĂšre

@adl1995 est -il encore en mesure de résoudre ce problÚme ? Je ne comprends pas du tout comment gérer cette erreur

c'est 2018 maintenant, y a-t-il une mise Ă  jour?

@ challenger532 Non, toujours pas.

L'erreur est toujours présente.

Mon conseil : utilisez une autre bibliothĂšque .

Bon, ça a un peu résolu mon problÚme. Vous voyez, je travaille avec vuejs et Laravel... j'ai configuré ma route Web Laravel en php comme suit :

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

puis le fichier vuejs j'ai simplement utilisĂ© axios pour envoyer une requĂȘte Ă  ma route :

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

et voila, ça marche bien.

si vous utilisez Laravel, fonction d'addition :

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

au contrĂŽleur ou Ă  la route avant le retour
Exemple:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
Désolé pour mon anglais. J'espÚre que cela peut vous aider.

J'utilise vue.js (localhost port 8080 ) et Flask pour mon API (localhost port 5000)

J'ai simplement dĂ» faire une petite modification dans mon code api (Flask sur le port 5000).
J'ai ajouté l'extension de flacon flask-CORS et modifié mon code pour l'utiliser.
Avant:

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

AprĂšs:

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

AprÚs cela, cela a fonctionné et j'ai pu utiliser mon API.
Donc, ce n'est pas vraiment un problĂšme d'axios, mais un problĂšme d'API et vous obtenez un avertissement de Firefox pas d'appeler la fonction axios.get.

En dĂ©finissant les en-tĂȘtes et les options de proxy, j'ai obtenu Ă  la place le Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. .

Mais j'ai pu contourner cela avec cette extension : https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en .

Malheureusement, cela n'a fonctionné qu'hier et pas aujourd'hui... J'ai essayé de comprendre pourquoi

RequĂȘtes proxy utilisant le serveur de dĂ©veloppement Webpack pour Ă©viter les _cors_ en mode dĂ©veloppement

Dans votre fichier webpack.config ajoutez

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

L'exemple ci-dessus va proxy la demande
axios.post(/api/posts/1 ... . . . .
Ă  https://my-target.com/posts/1

L'exemple Git ci-dessus, vous devez changer comme ceci dans votre demande

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

Dans le fichier webpack.config ........

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

le proxy de configuration webpack modifié changera votre demande comme ceci.

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

vous pouvez utiliser plusieurs chemins dans le proxy devServer comme celui-ci
Dans le fichier 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
    }
  }
}

Utilisez si vous avez besoin

    "changeOrigin": true,
    "secure": false

J'ai passé des heures à le réparer et il ne semble y avoir aucune aide partout. le moyen simple et rapide consiste à ajouter une extension chrome appelée Allow-Control-Allow-Origin*. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=fr

n'aidera que vous, mais qu'en est-il des autres ?

D'une certaine maniÚre utile : https://github.com/shalvah/cors-escape

en essayant Vue et axios, j'ai Ă©videmment eu le mĂȘme problĂšme.

Je viens d'essayer la solution fournie par sundar6445 et cela fonctionne parfaitement.
Le fichier de configuration webpack que j'ai modifié est dans/config/index.js. J'ai préféré modifier celui-ci puisque référencé dans/build/webpack.dev.conf.js

Vous y trouvez

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

Comme décrit par sundar, modifiez le proxyTable par exemple par quelque chose comme

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

ce qui signifie que tout ce qui commence par /events sera routĂ© vers http://localhost :3000/events. Pas de 'pathRewrite' dans mon cas, l'url relative sera la mĂȘme.

et bien sûr, n'oubliez pas de supprimer l'URL complÚte dans votre composant Vue. J'ai eu:

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

il devient:

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

et ça marche parfaitement bien. Merci à @sundar6445

J'espĂšre que cela t'aides

Je sais que c'est marqué fermé, mais je voulais souligner quelque chose. Parfois, cette erreur apparaßtra du cÎté client si votre clé API a expiré ou est utilisée par quelqu'un d'autre.

Cela peut aller sans dire pour les développeurs plus expérimentés, mais pour les débutants en codage, assurez-vous d'avoir une clé API unique. Toutes les API ne nécessitent pas de clés uniques, mais si elles le font, vous en aurez certainement besoin. Reportez-vous à la documentation de l'API pour votre API spécifique pour voir ce dont elles ont besoin.

Il n'y a pas d'option en tant que crossDomain à l'intérieur de l'Axios. Veuillez étudier le code source avant de donner/d'utiliser des indices erronés.

Vous ne pouvez pas exécuter JavaScript sur un client (sans désactiver CORS et faire de vous une cible pour XSS) pour récupérer des informations à partir d'un autre site.

Cela vous empĂȘche d'accĂ©der au navigateur d'un client et potentiellement de vider ses comptes bancaires ou de publier sur un site sans ses autorisations. Il en va de mĂȘme pour les sites de grattage (ce qui est essentiellement ce que l'opĂ©ration essaie de faire).

Vous pouvez gratter le Web (c'est-à-dire récupérer des données) à l'aide d'un serveur avec un module CORS et un proxy via ce serveur.

Je pense que cette configuration d'en-tĂȘte rĂ©soudra ce problĂšme.

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

Merci

Je sais que cela semble cliché, mais ma solution à ce problÚme a été de créer une API personnalisée pour gérer ces appels.

Le problĂšme ne vient pas d'axios. Le problĂšme vient du serveur. Lorsque vous fournissez des donnĂ©es, vous devez ajouter les en-tĂȘtes suivants avant de les envoyer.

Access-Control-Allow-Origin doit ĂȘtre dĂ©fini sur *

Access-Control-Allow-Headers doit ĂȘtre dĂ©fini sur Origin, X-Requested-With, Content-Type, Accept

Source : erreur CORS lors de l'appel axios.get

En référence à ces réponses, j'ai ajouté ces lignes à mon serveur express backend, comme ceci :

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

source : CORS sur ExpressJS

Et tout fonctionne bien pour moi, sans aucune configuration supplĂ©mentaire sur axios ou dans le frontend, donc ce n'est vraiment pas un problĂšme axios mais un manque de configuration d'en-tĂȘte cĂŽtĂ© serveur.

Enfin, je pense que cette autre réponse sur stackoverflow couvre assez bien le sujet :

Comment Ă©viter le contrĂŽle en amont CORS
Comment utiliser un proxy CORS pour contourner les problÚmes « No Access-Control-Allow-Origin header »
Comment rĂ©soudre les problĂšmes « L'en-tĂȘte Access-Control-Allow-Origin ne doit pas ĂȘtre le caractĂšre gĂ©nĂ©rique »

J'espÚre que ça aide.

si vous souhaitez rĂ©cupĂ©rer des donnĂ©es Ă  partir d'une API ou d'une URL tierce qui a un problĂšme avec son en-tĂȘte CORS (manquant ou contenant plusieurs valeurs), je pense que la seule solution pour cela est d'utiliser ce lien
" https://cors-anywhere.herokuapp.com/ "
J'utilise le lien pour les petits projets, mais pour les grands projets, vous pouvez créer votre propre API pour gérer les appels et créer l'API, vous pouvez utiliser le projet open source https://github.com/Rob--W/cors-anywhere / .

Celui-ci fonctionnera :

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

J'ai rencontré ce problÚme il y a quelque temps lors de la création de 4webm et 4chan-list-webm

Il convient de noter que si vous crĂ©ez un plugin de navigateur, vous n'avez pas besoin de jouer avec les en-tĂȘtes pour accĂ©der Ă  l'API. Peut-ĂȘtre que si nous invoquons @moot, il

domaine croisé : vrai

J'ai dû activer le port '8080' sur le backend CORS et cela a ensuite fonctionné.

sécurise

documentation webpack pour une meilleure compréhension : https://webpack.js.org/configuration/dev-server/#devserver -proxy

Si vous utilisez laravel ou lumen pour votre API backend. Et vous utilisez dĂ©jĂ  le package barryvdh/laravel-cors. La solution consiste Ă  dĂ©finir votre configuration cors.php comme en-tĂȘte, mĂ©thode et partie d'origine comme ceci
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
J'espÚre que ça résoudra le problÚme de quelqu'un

Si vous le faites dans Safari, cela ne prend pas de temps, activez simplement le menu développeur dans Préférences >> Avancé et sélectionnez "Désactiver les restrictions d'origine croisée" dans le menu Développement. Si vous voulez uniquement local, il vous suffit d'activer le menu développeur et de sélectionner "Désactiver les restrictions de fichiers locaux" dans le menu développement.

et dans Chrome pour OSX, ouvrez Terminal et exécutez :

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

--user-data-dir requis sur Chrome 49+ sur OSX

Pour Linux, exécutez :

$ google-chrome --disable-web-security
De plus, si vous essayez d'accéder à des fichiers locaux à des fins de développement comme AJAX ou JSON, vous pouvez également utiliser cet indicateur.

-–allow-file-access-from-files
Pour Windows, allez dans l'invite de commande et allez dans le dossier oĂč se trouve Chrome.exe et tapez

chrome.exe --disable-web-security
Cela devrait dĂ©sactiver la mĂȘme politique d'origine et vous permettre d'accĂ©der aux fichiers locaux.

J'ai essayé toutes les solutions mentionnées ci-dessus. rien ne fonctionne.
enfin trouvé un - https://github.com/expressjs/cors
j'espÚre que ça vous aide les gars

Le principal problÚme est la différence entre les demandes du serveur et les demandes des clients.

Lorsque vous effectuez des demandes via le client (alias la plupart du temps, un navigateur), vous ĂȘtes Ă  la merci du logiciel du navigateur. La norme pour les logiciels de navigation est d'empĂȘcher toute tentative d'activitĂ© malveillante pouvant provenir ou non de votre propre logiciel.

Si vous faites une demande depuis votre propre serveur (c'est-Ă -dire pas un client de navigateur), alors la donnĂ©e est que pour le code que vous avez Ă©crit vous-mĂȘme, personne (en fonction des paramĂštres de votre serveur) ne peut y accĂ©der ni le contrĂŽler, et vous savez quoi les types de demandes sont sortantes, il n'y a donc aucun problĂšme pour les appels rĂ©seau se produisant en dehors de votre environnement ou de vos connaissances.

C'est pourquoi les navigateurs sont stricts sur les requĂȘtes d'origine croisĂ©e, d'autant plus qu'une fois que votre code public est sur le client, vous avez moins de contrĂŽle sur qui le voit / qui peut le manipuler. Dans le cas oĂč votre application frontale est compromise et que certains logiciels malveillants sont capables d'effectuer des appels rĂ©seau Ă  partir de votre code au dĂ©triment de vos visiteurs/utilisateurs, ils veulent s'assurer que cela ne peut pas se produire. Par consĂ©quent, votre mydomain.com ne peut pas appeler allyourdataarebelongtome.com au cas oĂč vous ne vouliez pas que cela se produise.

La solution ici n'est pas que les requĂȘtes inter-domaines ne fonctionnent pas - c'est que soit votre propre serveur l'empĂȘche et vous devez tenir compte de cette circonstance en acceptant votre domaine d'origine, soit que le serveur tiers auquel vous essayez de faire des appels d'API a une autre mĂ©thode d'authentification/autorisation en plus de cette requĂȘte interdomaine.

@mddanishyusuf La solution a fonctionné pour moi.

Je pense que cette configuration d'en-tĂȘte rĂ©soudra ce problĂšme.

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

Merci

Merci! ;)

À partir d'ici : https://github.com/axios/axios J'ai rĂ©alisĂ© qu'ils ne mettaient pas l'URL complĂšte Ă  la demande d'URL axios.

J'essaie donc de résoudre ce problÚme en créant ma propre API sur mon site. je viens d'envoyer une demande comme celle-ci

axios.get('/sample/request')

alors http://127.0.0.1 :8080/sample/request enverra une autre demande à https://a.4cdn.org/ et renverra les réponses à axios en tant que json.

C'est du travail pour moi, j'espĂšre que cela pourra vous aider

https://github.com/axios/axios/issues/853#issuecomment -408218917 fonctionnait avec l'API fetch et une API Web .NET 4.5.

Si je comprends bien, le problÚme est que la demande est envoyée de loclahost:3000 à loclahost:8080 et que le navigateur rejette les demandes telles que CORS. La solution consistait donc à créer un proxy et le navigateur gérera les demandes au fur et à mesure qu'elles sont parties d'un serveur.
Corrige moi si je me trompe

Ma solution Ă©tait :
importer un proxy Ă  partir de 'http-proxy-middleware'
app.use('/api/**', proxy({ cible : "http://localhost:8080" }));

J'Ă©tais avec le mĂȘme problĂšme et je le rĂ©sous en installant 'cors' dans mon backend (Express).

Courir:
npm installer des cors

Ensuite, définissez simplement ceci:

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

Merci @fernandoruch , cela fonctionne avec mon serveur nodejs

j'ai eu le mĂȘme problĂšme et je l'ai rĂ©solu

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

a fonctionnĂ© au dĂ©but, mais ensuite il s'est arrĂȘtĂ© et je ne pouvais pas comprendre pourquoi.

puis j'ai réalisé que j'avais déplacé tout mon code dans un autre fichier donc j'ai besoin d'utiliser router :

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

Salut,

Toute mise Ă  jour sur ce problĂšme, j'utilise .net core 2.1 et axios 0.18.

Merci.

Je ne pense pas que le problĂšme soit dans axios, le problĂšme est dans votre serveur principal.

Pour moi, j'ai une architecture avec Flask en back-end et j'utilise axios dans Vue.JS, la seule chose que j'ai eu Ă  faire sur mon serveur Flask est :

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

Cependant, cela ne devrait pas ĂȘtre mis en production, vous pouvez Ă©galement avoir une liste d'autorisation d'origine croisĂ©e au niveau de nginx. J'ai lu ceci ,

Comme solution temporaire, vous pouvez utiliser ceci : https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Je n'ai pas trouvé mieux pour le moment..

Mauvaise idée

J'ai rencontrĂ© ce problĂšme lorsque j'ai tentĂ© de faire simplement une requĂȘte axios.get() Ă  l'API mĂ©tĂ©o Darksky. Lorsque j'ai lu la page FAQ de Darksky, j'ai trouvĂ© une question concernant ce mĂȘme problĂšme, ils ont rĂ©pondu en disant qu'ils l'avaient utilisĂ© comme mesure de sĂ©curitĂ© pour empĂȘcher tout accĂšs malveillant Ă  leurs informations et ont suggĂ©rĂ© de crĂ©er un proxy pour accĂ©der Ă  leur base de donnĂ©es.

J'ai apporté la modification suivante à mon fichier package.json (j'utilise create-react-app) :

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

myKey m'a été fourni par Darksky pour accéder à leurs données.

C'était une solution super simple et a fonctionné pour moi! Je soupçonne que de nombreux services API vont commencer à l'utiliser comme mesure de sécurité. J'espÚre que ma solution pourra aider d'autres personnes ayant des problÚmes similaires.

En résumé : créez un proxy.

Merci @fernandoruch . Cela fonctionne pour moi lorsque je l'ajoute Ă  app.js de mon serveur node.js

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 ou JSON-P) est utilisĂ© pour demander des donnĂ©es Ă  un serveur rĂ©sidant dans un domaine diffĂ©rent de celui du client. JSONP permet le partage de donnĂ©es en contournant la politique de mĂȘme origine.

J'utilise juste le $.get de jquery pour les appels d'API externes.

si vous souhaitez rĂ©cupĂ©rer des donnĂ©es Ă  partir d'une API ou d'une URL tierce qui a un problĂšme avec son en-tĂȘte CORS (manquant ou contenant plusieurs valeurs), je pense que la seule solution pour cela est d'utiliser ce lien
" https://cors-anywhere.herokuapp.com/ "
J'utilise le lien pour les petits projets, mais pour les grands projets, vous pouvez créer votre propre API pour gérer les appels et créer l'API, vous pouvez utiliser le projet open source https://github.com/Rob--W/cors-anywhere / .

Celui-ci fonctionnera :

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

@yasincidem - Vous ĂȘtes un diamant absolu pour cette suggestion. Bravo - j'ai suivi de nombreuses pistes sur le Web Ă  la recherche d'une solution et la vĂŽtre est la premiĂšre qui a fonctionnĂ© pour mon scĂ©nario particulier.

Je viens de rencontrer ce problĂšme. J'avais {withCredentials: true} (un copier-coller de mon autre API) pour que cette API tierce en particulier fonctionne, j'avais simplement Ă  supprimer {withCredentials: true}

Cette solution fonctionne pour moi

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

référence https://stackoverflow.com/questions/42422494/cross-domain-at-axios

si vous souhaitez rĂ©cupĂ©rer des donnĂ©es Ă  partir d'une API ou d'une URL tierce qui a un problĂšme avec son en-tĂȘte CORS (manquant ou contenant plusieurs valeurs), je pense que la seule solution pour cela est d'utiliser ce lien
" https://cors-anywhere.herokuapp.com/ "
J'utilise le lien pour les petits projets, mais pour les grands projets, vous pouvez créer votre propre API pour gérer les appels et créer l'API, vous pouvez utiliser le projet open source https://github.com/Rob--W/cors-anywhere / .

Celui-ci fonctionnera :

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

Extraordinaire ça marche !!!

nous avons également rencontré ce problÚme lors du passage à axios
notre configuration est webpack + devServer (avec proxy) + axios

le problĂšme Ă©tait que nous utilisions notre URL api complĂšte comme baseURL dans axios au lieu de simplement '/api' (le proxy fait le mappage via l'attribut cible)

À mon avis, cela pourrait ĂȘtre dĂ» Ă  nos propres erreurs. Je rencontre le mĂȘme problĂšme que ci-dessus. 2 jours j'ai pris le temps de chercher ce problĂšme. il s'avĂšre que c'est juste un petit problĂšme que j'ai trouvĂ©. l'adresse URL que j'ai saisie n'est pas conforme Ă  la documentation d'analyse. et maintenant axios fonctionne parfaitement sur mon angulaire 7

Vérifiez si le flacon ou un autre serveur a CORS activé.
Vérifiez également si l'adresse du serveur est correcte. J'étais bloqué juste parce que j'ai oublié d'ajouter le port du serveur.
axios.get('http://localhost:5000/jsonshow')
.then(réponse => (this.array= réponse))

Changez " localhost:3000 " en " http://localhost : 300 " fonctionne bien avec moi (assurez-vous d'activer les cors cÎté serveur)

Changez " localhost:3000 " en " http://localhost : 300 " fonctionne bien avec moi (assurez-vous d'activer les cors cÎté serveur)

si vous utilisez le port 300 et non 3000.

dans VueJS vous pouvez créer un vil appelé vue.config.js à la racine du projet s'il n'existe pas et ajouter quelque chose comme

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

Ensuite, votre appel Axios devrait ressembler Ă 

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

si vous souhaitez rĂ©cupĂ©rer des donnĂ©es Ă  partir d'une API ou d'une URL tierce qui a un problĂšme avec son en-tĂȘte CORS (manquant ou contenant plusieurs valeurs), je pense que la seule solution pour cela est d'utiliser ce lien
" https://cors-anywhere.herokuapp.com/ "
J'utilise le lien pour les petits projets, mais pour les grands projets, vous pouvez créer votre propre API pour gérer les appels et créer l'API, vous pouvez utiliser le projet open source https://github.com/Rob--W/cors-anywhere / .

Celui-ci fonctionnera :

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

Celui-ci a fonctionné pour moi! Merci!

Essaye celui-lĂ  :

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

si vous souhaitez rĂ©cupĂ©rer des donnĂ©es Ă  partir d'une API ou d'une URL tierce qui a un problĂšme avec son en-tĂȘte CORS (manquant ou contenant plusieurs valeurs), je pense que la seule solution pour cela est d'utiliser ce lien
" https://cors-anywhere.herokuapp.com/ "
J'utilise le lien pour les petits projets, mais pour les grands projets, vous pouvez créer votre propre API pour gérer les appels et créer l'API, vous pouvez utiliser le projet open source https://github.com/Rob--W/cors-anywhere / .

Celui-ci fonctionnera :

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

J'ai gagné du temps, merci beaucoup !

@ronnin Pour mémoire, j'ai essayé votre solution, mais cela ne fonctionne pas.

Quoi? Vraiment? Pour moi, ça a vraiment marché...
Pour la méthode GET, fonctionne comme un charme !

Voici l'exemple que j'ai fait en utilisant une API publique, basé sur le commentaire de @ronnin :
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

c'est 2019 maintenant, y a-t-il une mise Ă  jour? ??

j'utilise cette extension chrome pour développer mon application
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin Pour mémoire, j'ai essayé votre solution, mais cela ne fonctionne pas.

Les hommes, qui sont en difficulté, ne sont pas bien reconnus avec CORS, et devraient lire l'article @seungha-kim mentionné plus tÎt : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

En résumé :

  1. les ressources distantes que vous avez demandĂ©es, si elles ne sont pas sur le mĂȘme hĂŽte que la demande (appelĂ©e : origine), doivent fournir un en-tĂȘte CORS supplĂ©mentaire avec la ressource, aka. Autorisation de contrĂŽle d'accĂšs : hĂŽte (origine), en-tĂȘtes, mĂ©thodes, etc.
  2. demande par les navigateurs ou curl avec l'en-tĂȘte 'Access-Control-Request-Method' , la demande avec la mĂ©thode 'OPTIONS' sera d'abord essayĂ©e automatiquement avant la mĂ©thode prĂ©vue: 'GET', 'POST', etc.
    ce qui signifie que les gestionnaires de ressources distantes doivent gérer spécialement la méthode 'OPTION'. par exemple (nginx) :
    ```groovy
    emplacement /la-ressource-distante {
    if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Headers' 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' ;
    add_header 'Access-Control-Allow-Methods' 'OPTIONS, GET, POST, PUT, PATCH, DELETE';
    add_header 'Access-Control-Allow-Credentials' true ;
    add_header 'Access-Control-Max-Age' 1728000; # 20j
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
```

  1. comme mentionnĂ© ci-dessus, je n'ai pas utilisĂ© la valeur * pour chaque en-tĂȘte Access-Control-Allow-*.
    valeur *, a de nombreuses restrictions.
    une. value * to Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods ne peut pas fonctionner avec Access-Control-Allow-Credentials=true. si un cookie est requis avec la demande, vous aurez besoin de Access-Control-Allow-Credentials=true
    b. seul * est valide, *.google.com est INVALIDE
  1. Access-Control-Allow-Headers est une liste d'en-tĂȘtes de votre demande Ă©ventuellement avec. l'existence de certains en-tĂȘtes qui n'y figurent pas vous bloquera. il suffit de vĂ©rifier et d'activer les en-tĂȘtes dans Access-Control-Allow-Headers

  2. le problÚme ne réside généralement pas dans le client (navigateur, votre application cliente), mais dans la ressource demandée par le serveur située.

  3. parlez à votre partenaire de développement cÎté serveur

J'espĂšre que c'est utile

@ronnin : Si je comprends bien vos

@ronnin : Si je comprends bien vos

Utilisez l'application suivante ci-dessous pour faire fonctionner vos demandes

Cela a fonctionnĂ© pour moi mĂȘme si le serveur n'a pas activĂ© CORS

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

Utilisation :

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

@ronnin : Si je comprends bien vos

si ma requĂȘte GET demande des ressources Ă  un serveur sur lequel ils n'activent pas CORS, nous ne pouvons pratiquement rien faire du front-end via la
C'est le navigateur qui suit le protocole et rejette votre demande.
mais, vous pouvez obtenir la ressource par demande de navigateur traditionnelle, comme location.href, iframe, form.action

La plupart du temps, nous avons mis en place un serveur proxy inverse propre (comme nginx), avec un cÎté serveur auto-contrÎlé pour résoudre le problÚme de demande de troisiÚme ressource sans CORS activé.
L'application Heroku, mentionnée par @ndjerrou , est le cas.

nous avons des voitures autonomes et une IA, mais nous avons toujours du mal avec CORS

J'ai réussi à résoudre ce problÚme en utilisant heroku comme proxy.

Voici mon 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
                   })
            })

c'est 2020 maintenant, y a-t-il une mise Ă  jour? ??

Je peux confirmer, c'est 2020 et toujours pas de mise Ă  jour.
fetch() a le mode mode: 'no-cors' , pourquoi axios n'a-t-il pas quelque chose de similaire ?

J'ai essayé

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

Et aucun de ces en-tĂȘtes n'a fonctionnĂ©. J'ai essayĂ© withCredentials sur les Ă©tats vrai et faux, cela n'a pas fonctionnĂ©.

Avec fetch, ça marche.

Que suis-je censé faire si je ne veux pas m'occuper de la politique CORS et continuer à utiliser axios ?
Edit : De plus, pourquoi diable ce problÚme est-il clos ? Nous avons évidemment encore un problÚme avec cela.

Vous devez dĂ©finir 'Access-Control-Allow-Origin' : 'YOUR_IP:YOUR_PORT' dans les en-tĂȘtes de rĂ©ponse PAS dans les en-tĂȘtes de demande.

Je peux confirmer, c'est 2020 et toujours pas de mise Ă  jour.
fetch() a le mode mode: 'no-cors' , pourquoi axios n'a-t-il pas quelque chose de similaire ?

J'ai essayé

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

Et aucun de ces en-tĂȘtes n'a fonctionnĂ©. J'ai essayĂ© withCredentials sur les Ă©tats vrai et faux, cela n'a pas fonctionnĂ©.

Avec fetch, ça marche.

Que suis-je censé faire si je ne veux pas m'occuper de la politique CORS et continuer à utiliser axios ?
Edit : De plus, pourquoi diable ce problÚme est-il clos ? Nous avons évidemment encore un problÚme avec cela.

Il n'y a pas de problÚme avec les axios, c'est pourquoi le problÚme a été clos. prenez simplement une chaise et lisez l'article sur MDN : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

??

Merci les gars, ça a aidĂ©! Excusez-moi pour la gĂȘne occasionnĂ©e !

J'ai eu cette erreur sur axios lorsque j'étais sur le point d'accÚs mobile de mon appareil. Ensuite, quand j'ai utilisé le WiFi dans un café, je n'ai pas eu de CORB

J'ai essayĂ© d'utiliser l'API Wikipedia et j'ai eu le mĂȘme problĂšme.
L'ajout de origin=* à l'URL a corrigé le problÚme.

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

Je l'ai résolu en n'utilisant pas axios, j'ai essayé GET à partir d'URL externes avec $ajax et $get, je n'ai eu aucun problÚme avec les anciens trucs jquery. C'est un BUG à coup sûr.

nous sommes en 2021 maintenant, y a-t-il une mise Ă  jour ? ??

Je rencontre un problÚme similaire lié à "Access-Control-Allow-Headers" en essayant d'atteindre un webhook zapier à partir d'axios (0.18.0) et de chrome (75.0.3770.100).

Ma demande est :

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

Je vais recevoir une erreur concernant l'en-tĂȘte non pris en charge :

bloquĂ© par la stratĂ©gie CORS : le type de contenu du champ d'en-tĂȘte de demande n'est pas autorisĂ© par Access-Control-Allow-Headers dans la rĂ©ponse de contrĂŽle en amont

image

AprĂšs avoir lu cette page, je comprends :

    1. Zapier doit configurer la rĂ©ponse de son serveur pour prendre en charge les en-tĂȘtes Access-Control-Request-Headers pour au moins "content-type"
    1. Je dois configurer ma demande pour exclure d'une maniĂšre ou d'une autre la vĂ©rification d'en-tĂȘte « type de contenu » pendant l'OPT de contrĂŽle en amont.

Y a-t-il des suggestions pour réaliser l'option 2 ? Les problÚmes courants de Zapier


Edit: je suis convaincu que cela n'a rien Ă  voir avec axios, mais plutĂŽt un mauvais support du cĂŽtĂ© de Zapier. La requĂȘte semble fonctionner aprĂšs le passage Ă  un GET avec des paramĂštres d'URL.

Eh bien, si dans la FAQ, ils mentionnent qu'aucun paramÚtre de type de contenu n'est nécessaire, vous
pourrait juste essayer l'ol
Var xhr = new XMLHTTPRequest() et essayez-le de cette façon sans axios.

Votre publication sur le webhook est-elle sur le client ou le serveur ?

Le mar 25 juin 2019, 15 h 27, Pete Schmitz [email protected] a Ă©crit :

Je rencontre un problÚme similaire lié à "Access-Control-Allow-Headers"
en essayant de frapper un webhook zapier d'axios (0.18.0) et de chrome
(75.0.3770.100).

Ma demande est :

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

Je vais recevoir une erreur concernant l'en-tĂȘte non pris en charge :

bloquĂ© par la stratĂ©gie CORS : le type de contenu du champ d'en-tĂȘte de la demande n'est pas autorisĂ©
par Access-Control-Allow-Headers dans la réponse de contrÎle en amont

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

AprĂšs avoir lu cette page, je comprends :

-
1. Zapier doit configurer la réponse de son serveur pour prendre en charge
Access-Control-Request-Headers pour au moins "content-type"
-
1. Je dois configurer ma demande pour exclure d'une maniĂšre ou d'une autre le
VĂ©rification d'en-tĂȘte "content-type" pendant l'OPT de contrĂŽle en amont.

Y a-t-il des suggestions pour réaliser l'option 2 ? Les problÚmes communs de Zapier
Ă  propos des en-tĂȘtes de demande de contrĂŽle d'accĂšs
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
suggĂšre "ne pas personnaliser le type de contenu" de votre demande. Cependant, je
je n'ai aucune option d'en-tĂȘte dans ma demande, ni aucun en-tĂȘte par dĂ©faut
configuré sur axios, je ne peux donc que supposer que cela est implicite du cÎté d'axios?

-
Vous recevez ceci parce que vous avez commenté.
RĂ©pondez directement Ă  cet e-mail, consultez-le sur GitHub
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNVLOXWWPA2ZGODyTORRYLNMVXWWSHJ460
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

des nouvelles Ă  ce sujet? Je suis Ă  peu prĂšs dans le mĂȘme bateau.

@imranimu Le problĂšme est une combinaison du navigateur que vous utilisez et du serveur

Vous avez quelques options:

Si vous contrĂŽlez le serveur que vous demandez, autorisez-le Ă  rĂ©pondre Ă  toutes les requĂȘtes OPTIONS avec les en-tĂȘtes suivants :

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

Avec express, cela pourrait ressembler à ceci, placé avant les autres routes de votre chaßne middleware :

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

Vous devez Ă©galement ajouter un en-tĂȘte Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> Ă  la rĂ©ponse.

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

En termes simples, le navigateur sait quand vous demandez une ressource sur une origine diffĂ©rente (domaine), il envoie donc un contrĂŽle en amont (en utilisant le type de mĂ©thode de demande OPTIONS, pas GET, POST, etc.), pour voir si le serveur dit que c'est ok pour recevoir la demande. Il s'agit d'une mesure de sĂ©curitĂ© de base du navigateur pour rĂ©duire le risque qu'un site Web tiers utilise votre API - ce que vous ne souhaitez peut-ĂȘtre pas. Le code ci-dessus indique simplement qu'un site Web spĂ©cifique peut utiliser l'API. S'il peut ĂȘtre utilisĂ© par tous les sites Web, vous devez dĂ©finir Access-Control-Origin: * .

Sinon, si vous ne contrĂŽlez pas le serveur auquel vous faites la demande, exposez une route sur le serveur qui sert la page, qui effectue (proxy) la demande pour vous. Cela fonctionne car la route exposĂ©e a la mĂȘme origine (domaine) que votre application, donc la stratĂ©gie CORS n'est pas appliquĂ©e, et le serveur sur lequel vous avez exposĂ© la route n'est pas un navigateur, donc ne recevra pas d'erreur CORS.

@ Aitchy13 le serveur API Access-Control-Origin: * , la console me donne cette erreur comme dans ce problĂšme,

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 ‘*’).

Vous dites aussi, pour ajouter...

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

... mais Access-Control-Allow-Origin n'est-il pas réservé aux réponses et non aux demandes ?

Non pris en charge si Access-Control-Allow-Origin : * ... trĂšs Ă©trange.

Voici quelques-uns des en-tĂȘtes de rĂ©ponse de l'API pour quelques rĂ©fĂ©rences pour aider Ă  l'aide de futures solutions possibles :

(Il s'agit d'une demande de méthode OPTIONS avant la demande réelle qui est refusée en raison de CORS)
EN-TÊTES DE RÉPONSE

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

Ou ai-je quelque chose qui ne va pas ? J'Ă©tais sur le point de casser mon ordinateur portable en deux Ă  cause de ce problĂšme.

J'ai eu le mĂȘme problĂšme, aprĂšs plusieurs tentatives, en testant certaines solutions, aucune n'a fonctionnĂ©. seulement aprĂšs avoir dĂ©fini le proxy dans le package.json.
ajoute :
"proxy": "adresse API"
qu'il contournera les cors.

@IkarosFeitosa Pouvez-vous publier votre configuration de proxy de configuration ?

@zacharytyhacz, vous ne pouvez pas envoyer les informations d'identification du navigateur lorsque le serveur répond avec Access-Control-Allow-Origin: * .

Soit:

  1. remplacez * par une adresse de site Web spécifique.
  2. dĂ©finissez ...withCredentials: false dans le paramĂštre config/options de la fonction de requĂȘte axios que vous utilisez.
  3. dĂ©finissez la propriĂ©tĂ© proxy dans le paramĂštre config/options de la fonction de requĂȘte axios que vous utilisez, sur un proxy valide (exemple ci-dessous)
proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

Aucun progrĂšs? Je configure mon serveur Web pour dĂ©finir l'en-tĂȘte resposne, mais cela ne semble pas fonctionner.
image

image
Je confonds cette astuce d'erreur :
image
CORS devrait ĂȘtre la limite du navigateur Web, il faut autoriser le retour du serveur, j'autorise dĂ©jĂ  ce cors, mais le navigateur m'a alors dit No 'Access-Control-Allow-Origin' header is present on the requested resource .

J'essaye ma configuration de cors de serveur avec fetch api, ça marche bien.

Si vous utilisez nodejs avec express . Ce post pourrait t'aider.

Si vous voulez que seuls certains chemins soient autorisés, par exemple :
/home/fridge - non autorisé d'autres origines
/home/toilet - devrait ĂȘtre autorisĂ© Ă  partir d'autres origines

Vous pouvez essayer l'implémentation suivante (a fonctionné pour moi)

Dans routes/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);
});

Si vous n'utilisez pas nodejs avec express - essayez de rechercher sur Google la demande de méthode OPTIONS


Testé depuis express : 4.16.3

Non, :) C'est des problÚmes lors du développement (nous utilisons http)
lorsque nous publions sur le serveur (nous utilisons https)
Cela ne s'est pas produit.
Alors installez simplement le module complémentaire : https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

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

C'est résolu ma vie !!

Merci pour la suggestion. J'ai mis Ă  jour mon code pour acheminer la requĂȘte via un proxy :

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

Cependant, j'obtiens toujours cette erreur :

Demande d'origine croisĂ©e bloquĂ©e : la politique de mĂȘme origine interdit la lecture de la ressource distante sur https://a.4cdn.org/a/threads.json. (Raison : l'en-tĂȘte CORS 'Access-Control-Allow-Origin' ne correspond pas Ă  ' https://boards.4chan.org ').

J'ai cherché dans divers forums et questions sur Stack Overflow et je n'arrive pas à trouver de solution à ce problÚme. Ce serait apprécié si quelqu'un pouvait donner un aperçu.

Salut les gars, essayez ceci avant l'appel axios, ça a marché pour moi

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

c'Ă©tait ma solution

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

Je vais créer une vidéo sur la façon de résoudre ce problÚme CORS. Je mettrai à jour ce commentaire avec un lien vers ma vidéo YouTube.

Éditer:
https://youtu.be/hxyp_LkKDdk

nous sommes en 2021 maintenant, y a-t-il une mise Ă  jour ? ??

Oui je suis tellement dans ma merde que je devais vraiment vĂ©rifier cette annĂ©e merde 😆

Utilisez simplement fetch pour tester si le cors du serveur fonctionne en premier.

Et...

axios peut demander mon koa-server , mais pas directement iris , les deux armes populaires cors-middleware.

1358

Pourquoi n'y a-t-il pas de solution officielle Ă  ce problĂšme ? J'ai lu tout ce fil et je suis dĂ©concertĂ© par ce qui semble ĂȘtre un problĂšme universel que personne ne rĂ©sout vraiment de maniĂšre standard.

Pourquoi n'y a-t-il pas de solution officielle Ă  ce problĂšme ? J'ai lu tout ce fil et je suis dĂ©concertĂ© par ce qui semble ĂȘtre un problĂšme universel que personne ne rĂ©sout vraiment de maniĂšre standard.

L'ensemble du problĂšme CORS n'est pas Axios, ni mĂȘme JavaScript lui-mĂȘme. C'est une fonction de sĂ©curitĂ© intĂ©grĂ©e Ă  la plupart ou Ă  tous les navigateurs. Il existe des moyens de 'pirater', mais c'est au serveur de rĂ©pondre avec les bons en-tĂȘtes.

Pourquoi n'y a-t-il pas de solution officielle Ă  ce problĂšme ? J'ai lu tout ce fil et je suis dĂ©concertĂ© par ce qui semble ĂȘtre un problĂšme universel que personne ne rĂ©sout vraiment de maniĂšre standard.

L'ensemble du problĂšme CORS n'est pas Axios, ni mĂȘme JavaScript lui-mĂȘme. C'est une fonction de sĂ©curitĂ© intĂ©grĂ©e Ă  la plupart ou Ă  tous les navigateurs. Il existe des moyens de 'pirater', mais c'est au serveur de rĂ©pondre avec les bons en-tĂȘtes.

Donc, compte tenu de cette réponse, quelle est alors la maniÚre la plus "réussie" d'implémenter un correctif pour un problÚme CORS ?

Ok, aprĂšs deux jours de recherche, j'ai enfin compris.

À proprement parler, ce n'est pas une question d'axios. En fait, cela ne doit mĂȘme pas ĂȘtre considĂ©rĂ© comme un problĂšme. axios a Ă©tĂ© conçu pour fonctionner selon toutes ces normes CORS Ă©tranges et ennuyeuses, donc le message : CORS header ‘Access-Control-Allow-Origin’ missing devrait arriver, c'est le bon fonctionnement d'axios. Dans l'exemple avec l'api 4chan, comme cela a Ă©tĂ© dit prĂ©cĂ©demment, le problĂšme n'est pas axios, c'est l'api 4chan elle-mĂȘme qui ne suit pas les normes CORS.

Certaines personnes ont suggĂ©rĂ© la vieille astuce consistant Ă  utiliser un proxy pour gĂ©rer7Ă©viter toutes ces validations d'en-tĂȘtes. Voici un blog de Negar Jamalifard expliquant comment faire l'astuce : https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 , je ne sais pas si cela peut ĂȘtre considĂ©rĂ© comme une mauvaise pratique.

Dans mon cas, j'ai essayé pendant deux jours de me connecter à une API de base asp net dans mon propre hÎte local jusqu'à ce que je réalise qu'axios, avant d'envoyer ma demande d'obtention, envoyait automatiquement une "demande de contrÎle en amont" qui est envoyée en tant que méthode OPTIONS que mon serveur était pas préparé à gérer. S'il y a quelqu'un à blùmer, c'est à chrome et firefox d'avoir affiché un message si ambigu.

Certaines personnes ont suggĂ©rĂ© la vieille astuce consistant Ă  utiliser un proxy pour gĂ©rer7Ă©viter toutes ces validations d'en-tĂȘtes. Voici un blog de Negar Jamalifard expliquant comment faire l'astuce : https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 , je ne sais pas si cela peut ĂȘtre considĂ©rĂ© comme une mauvaise pratique.

Donc, le simple proxy est le meilleur cas possible pour ces appels ? C'est une honte.

Donc, le simple proxy est le meilleur cas possible pour ces appels ? C'est une honte.

Eh bien... vous pouvez aussi essayer de parler avec le type qui crée l'API que vous essayez de consommer et lui demander de la réparer.

J'ai résolu le problÚme :
pour axios : url= " http://localhost :8080" method='post'
pour ma réponse Django Server :
uesrItem = {'utilisateur': 'xxx'}
réponse = JsonResponse(userItem)
réponse["Access-Control-Allow-Origin"] = " http://localhost :8080"
réponse["Access-Control-Allow-Credentials"] = 'true'
réponse["Access-Control-Allow-Methods"] = "POST, OPTIONS"

Le problĂšme n'est pas axios, mais l'API que vous demandez !

Par exemple, j'ai codé une API dans Flask et la méthode GET était :

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

Mais le problĂšme a Ă©tĂ© rĂ©solu lorsque j'ai ajoutĂ© un en-tĂȘte dans la rĂ©ponse de l'API :

@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

Ensuite, j'enregistre ma réponse axios et je l'obtiens :

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

Je ne sais pas quelle API vous utilisez tous, mais dans Flask, c'était résolu !

Dans mon cas, il n'y avait rien de mal avec axios. Je viens de demander au gars qui a créé l'API d'activer CORS cÎté serveur.

essaye ça

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

J'ai utilisé la solution de contournement https://github.com/Rob--W/cors-anywhere et cela fonctionne trÚs bien, mais en prod, je demanderai au gars qui a créé l'API d'activer les cors pour mon domaine

Je ne pense pas que vous puissiez résoudre CORS directement dans axios, car CORS est une restriction de navigateur qui se situe entre votre navigateur et les serveurs cibles.

Tu peux soit:

  1. Incluez Access-Control-Allow-Origin dans vos en-tĂȘtes de rĂ©ponse de votre serveur cible .
  2. N'incluez pas le nom d'hĂŽte dans votre requĂȘte axios afin qu'il demande votre serveur d'origine . Ensuite, Ă  partir de votre serveur d'origine, vous pouvez faire ce que vous voulez sur le serveur cible.

Veuillez mentionner un extrait de code d'exemple détaillé.
Cela lui sera utile.

J'avais le mĂȘme problĂšme sur mon local.
J'ai ajouté des cors sur mon backend et résolu. :)

Ce n'est pas le problÚme avec le axios C'est le problÚme avec le backend. J'utilise Django. Et l'ajout de ces deux résoudra le problÚme.

Ajouter CORS Middlewear

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

Et permettant au CORS.
(Permettant CORS pour tous)

CORS_ORIGIN_ALLOW_ALL = True

(Ceci est un peu peu sûr car il autorise toutes les origines. Ce qui le rendra vulnérable aux attaques CSRF)
Par conséquent, pour la production, n'autoriser que les origines spécifiques

CORS_ORIGIN_ALLOW_ALL = False

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

Exemple :+1 :

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

Salut tout le monde,
Comme il a Ă©tĂ© mentionnĂ©, ce problĂšme est une protection du navigateur contre les requĂȘtes cross-origin. Je l'ai rĂ©solu en suivant ces instructions : https://support.google.com/chrome/thread/11089651?hl=en

Pour ceux qui luttent encore :
J'espĂšre que vous comprenez maintenant que ce n'est pas un problĂšme avec Axios et que le navigateur bloque CORS en raison d'un en-tĂȘte qui n'est pas dĂ©fini par le serveur. Si vous comprenez cela et que vous rencontrez toujours des problĂšmes avec votre propre serveur qui ne dĂ©finit pas les en-tĂȘtes, assurez-vous de le dĂ©finir sur votre serveur Web rĂ©el lorsque vous utilisez un proxy inverse. Par exemple, de nombreuses applications Node/Express sont servies par NGINX en production avec un proxy inverse. Voir enable-cors.org pour savoir comment le configurer dans NGINX.

Pour ceux qui luttent encore :
J'espĂšre que vous comprenez maintenant que ce n'est pas un problĂšme avec Axios et que le navigateur bloque CORS en raison d'un en-tĂȘte qui n'est pas dĂ©fini par le serveur. Si vous comprenez cela et que vous rencontrez toujours des problĂšmes avec votre propre serveur qui ne dĂ©finit pas les en-tĂȘtes, assurez-vous de le dĂ©finir sur votre serveur Web rĂ©el lorsque vous utilisez un proxy inverse. Par exemple, de nombreuses applications Node/Express sont servies par NGINX en production avec un proxy inverse. Voir enable-cors.org pour savoir comment le configurer dans NGINX.

J'ai galéré pendant 3 heures, rien ne change cÎté client, finalement j'ai ajouté les trucs suivants sur le serveur :

installer egg-cors (pour le projet egg uniquement)

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

c'est tout

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

Utilisez simplement fetch pour tester si le cors du serveur fonctionne en premier.

Et...

axios peut demander mon koa-server , mais pas directement iris , les deux armes populaires cors-middleware.

1358

Cela a fonctionné pour moi et j'ai besoin d'apprendre pourquoi

Je travaillais avec Tornado et Vuejs, axios n'était pas le problÚme, sur mon backend a ajouté:

# 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
C'est travaillé
Merci Verrrrrrrrrr

J'ai le mĂȘme problĂšme
Mon code
axios({
méthode : "obtenir",
URL : "http://localhost:4000/users",
})
.then(réponse => {
console.log(réponse);
})
.catch(Erreur => {
console.log(Erreur)
});
}
Obtenir cette erreur
L'accĂšs Ă  XMLHttpRequest Ă  ' http://localhost :4000/users' from origin ' http://localhost :3000' a Ă©tĂ© bloquĂ© par la stratĂ©gie CORS : la rĂ©ponse Ă  la demande de contrĂŽle en amont ne passe pas le contrĂŽle d'accĂšs : pas de 'Access-Control L'en-tĂȘte -Allow-Origin' est prĂ©sent sur la ressource demandĂ©e.

Quelqu'un pourrait-il me donner une solution Ă©tape par Ă©tape Ă  ce que je dois faire?

@albertpinto Tout d'abord, vous devez comprendre qu'axios n'est pas le problÚme, le "backend" que vous utilisez doit pouvoir recevoir des données externes. donc dans google vous pouvez rechercher. quelque chose comme _enable cors on (mettez le langage ou le framework que vous utilisez)_

@albertpinto regarde toutes les solutions possibles dans ce mĂ©ga fil. Ce n'est pas un problĂšme cĂŽtĂ© client/front-end de votre cĂŽtĂ© - c'est en fait le serveur (localhost: 4000). Le serveur doit rĂ©pondre avec des en-tĂȘtes CORS pour autoriser l'origine.

Par exemple, votre serveur doit rĂ©pondre avec des en-tĂȘtes tels que :

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

J'ai résolu ce problÚme de la maniÚre suivante :

  1. Install cors npm : npm install cors (sur votre serveur de nƓud de repos dans mon cas http://localhost:4000)

Cela s'applique également à votre point final :
var cors = require('cors')
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())

Merci pour toutes les suggestions !

// Pour CORS, si vous utilisez express js, vous pouvez simplement utiliser le package cors via npm.

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

cURL n'applique pas les rÚgles CORS. Ces rÚgles sont appliquées par les navigateurs à des fins de sécurité.

Lorsque vous mentionnez que vous avez ajoutĂ© l'en-tĂȘte pertinent, je suppose que vous voulez dire que vous avez ajoutĂ© ces en-tĂȘtes Ă  la demande. En fait, l'en-tĂȘte est attendu dans les en-tĂȘtes de rĂ©ponse du serveur, indiquant que la ressource est autorisĂ©e Ă  ĂȘtre consultĂ©e directement par d'autres sites Web.

Pour info, CORS - Partage de ressources d'origine croisĂ©e. Étant donnĂ© que votre API ne le prend pas en charge, vous avez deux options -

  1. Utilisez un serveur proxy sur le mĂȘme domaine que votre page Web pour accĂ©der Ă  l'API de 4chan ou,
  2. Utilisez un serveur proxy sur n'importe quel autre domaine, mais modifiez la rĂ©ponse pour inclure les en-tĂȘtes nĂ©cessaires.

J'aimerais voter pour clore ce problĂšme comme "Pas un problĂšme".

@sunnykgupta
mĂȘme logique, mĂȘme corps, mais la demande de publication http angulaire vers le point de terminaison distant ne reçoit pas d'erreur de bloc CORS

Si vous avez un serveur Go en cours d'exécution, vous suggérons d'utiliser Gorilla

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

J'ai résolu ce problÚme de la maniÚre suivante :

1.créez un fichier vue.config.js à la racine du projet juste à cÎté de package.json, contenant :

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

2.faites une requĂȘte http comme celle-ci :

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', {
en-tĂȘtes : {
'ContrÎle-AccÚs-Autoriser-Origine' : '*',
'Access-Control-Allow-Headers' : 'Content-Type, Authorization',
},
Procuration: {
hÎte : '104.236.174.88',
port : 3128
}
}).then(fonction (réponse) {
console.log('la réponse est : ' + réponse.data);
}).catch(fonction (erreur) {
si (erreur.réponse) {
console.log(error.response.headers);
}
else if (error.request) {
console.log(error.request);
}
autre {
console.log(erreur.message);
}
console.log(error.config);
});

Bonjour Ă  tous,
Je viens de poster ceci car il m'a fallu des heures pour résoudre ce problÚme.

Tout d'abord, CORS est dĂ©finitivement un problĂšme cĂŽtĂ© serveur et non cĂŽtĂ© client, mais j'Ă©tais plus que sĂ»r que le code serveur Ă©tait correct dans mon cas, car d'autres applications fonctionnaient en utilisant le mĂȘme serveur sur des domaines diffĂ©rents. Le problĂšme a commencĂ© lorsque j'ai commencĂ© Ă  utiliser axios avec mon instance personnalisĂ©e.

Dans mon cas, c'Ă©tait un problĂšme trĂšs spĂ©cifique lorsque nous utilisions une baseURL dans axios instance GET ou POST de n'importe oĂč, axios ajoute une barre oblique / entre baseURL et l'URL de la requĂȘte. Cela a du sens aussi, mais c'Ă©tait le problĂšme cachĂ©. Mon serveur Laravel Ă©tait en train de rediriger pour supprimer la barre oblique de fin qui causait ce problĂšme.

En gĂ©nĂ©ral, la requĂȘte OPTIONS prĂ©alable au vol n'aime pas les redirections. Alors, vĂ©rifiez-le dĂ©finitivement et Ă©vitez-le.

J'espĂšre que cela pourra aider quelqu'un mĂȘme si rien de tout cela n'est un bug.

Cette page vous a été utile?
0 / 5 - 0 notes