web-dev-qa-db-fra.com

Erreur ReactJS API Data Fetching CORS

J'essaie de créer une application Web React depuis quelques jours pour mon stage et j'ai rencontré une erreur CORS. J'utilise la dernière version de reactJS et je la place dans le create-react-app, et ci-dessous est le code de récupération:

componentDidMount() {
  fetch('--------------------------------------------',{
    method: "GET",
    headers: {
      "access-control-allow-Origin" : "*",
      "Content-type": "application/json; charset=UTF-8"
    }})
  .then(results => results.json())
  .then(info => {
    const results = info.data.map(x => {
      return {
        id: x.id,
        slug: x.slug,
        name: x.name,
        address_1: x.address_1,
        address_2: x.address_2,
        city: x.city,
        state: x.state,
        postal_code: x.postal_code,
        country_code: x.country_code,
        phone_number: x.phone_number,
      }
    })
    this.setState({warehouses: results, lastPage: info.last_page});
  })
  .then(console.log(this.state.warehouses))
 }

Je suis désolé de ne pas pouvoir publier l'URL de l'API en raison des règles de l'entreprise, mais il est confirmé qu'il n'y a pas de paramètre CORS dans le backend de l'API.

Cependant, je rencontre les erreurs suivantes lors de l'exécution sur mozilla

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

et

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).

Si exécuté sur chrome il donne l'erreur suivante

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

et

Failed to load --------------------------------------------------------: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

et

Uncaught (in promise) TypeError: Failed to fetch

Une autre chose est que je suis capable d'ouvrir l'url dans mes navigateurs sans aucun problème.

Veuillez aider et merci!

Informations supplémentaires

La raison pour laquelle j'ai ajouté le paramètre CORS est qu'il donne une erreur CORS, donc le supprimer ne résout pas vraiment le problème.

Ensuite, j'ai essayé de configurer le proxy, mais cela donne maintenant

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

Selon Internet, cela est dû au fait que la réponse n'est pas un JSON. Cependant, quand j'ai vérifié l'API, cela donne ceci

api img

ce qui signifie que le type de retour devrait être un droit JSON?

Informations supplémentaires

vérifier la réponse donnera cette

{"status": 200, "total": 1, "per_page": 3, "current_page": 1, "last_page": 1, "next_page_url": null, "prev_page_url": null, "from": 1, " à ": 3," données ": [{" id ": 1," slug ":" america "," name ":" america "," address_1 ":" USA Court "," address_2 ":" USA ", "ville": "USA", "état": "USA", "postal_code": "94545", "country_code": "US", "phone_number": "10000001", "created_by": null, "updated_by": null, "created_at": "2017-11-10 11: 30: 50 + 00", "updated_at": "2018-06-28 07: 27: 55 + 00"}]}

javascriptreactjscors
6
Last

Les paramètres CORS doivent être configurés dans l'API pour autoriser l'accès à partir de votre domaine d'application React. Pas de paramètres CORS, pas de AJAX de différents domaines. C'est aussi simple que ça. Vous pouvez soit ajouter des paramètres CORS à l'API de votre entreprise (il est peu probable que cela se produise), soit contourner la procédure décrite ci-dessous:

Le CORS est uniquement un mécanisme de navigateur client pour protéger les utilisateurs contre AJAX malveillant. Donc, une façon de contourner ce problème consiste à envoyer par proxy votre demande AJAX de votre application React à son propre serveur Web. Comme Vincent le suggère, le create-react-app Fournit un moyen simple de le faire: dans votre fichier package.json, Il vous suffit de lancer "proxy": "http://your-company-api-domain". Pour plus de détails, veuillez voir ceci lien

Ensuite, dans votre application React, vous pouvez utiliser une URL relative comme celle-ci: fetch('/api/endpoints'). Notez que l'URL relative doit correspondre à l'API de votre entreprise. Cela enverra une demande à votre serveur, puis le serveur transmettra la demande à l'API de votre entreprise et renverra la réponse à votre application. Étant donné que la demande est traitée de manière serveur à serveur et non navigateur à serveur, la vérification CORS ne se fera pas. Par conséquent, vous pouvez supprimer tous les en-têtes CORS inutiles dans votre demande.

15
Dat Pham