web-dev-qa-db-fra.com

La requête échoue à cause d'un problème avec la base de données CORS avec Origin from localhost

J'ai vu des dizaines de questions sur SO et différents blogs qui en parlaient avec des "réponses" - en vain.

J'ai une application React.js sur ma machine locale (Ubuntu 16.04). Localement, j'essaie de le tester en exécutant npm start et le navigateur s'ouvre à http: // localhost: 3000 .

Sur une page, j'essaie d'accéder à mon api PHP qui se trouve sur mon serveur d'hébergement partagé.

Chrome et Firefox disent tous les deux que cela échoue parce que le serveur n'a pas Access-Control-Allow-Orgin.

Message exact:

Failed to load http://---/api/v1/categories: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost.com:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
localhost.com/:1 Uncaught (in promise) TypeError: Failed to fetch

Cependant, sur mon point d'entrée du serveur php, j'ai:

header("Access-Control-Allow-Orgin: *");
header("Access-Control-Allow-Methods: *");

Voici où je fais mon appel api dans mon application de réaction:

 componentDidMount() {

  var options = {
    method: 'get',
    headers: {
        "Access-Control-Request-Headers": "*",
        "Access-Control-Request-Method": "*"
    },
  }

  // I have since removed the headers from the options as advised in the comments 
  fetch('http://---/api/v1/categories', options)
  .then(results => {
    return results.json();
  }).then(data => {
    let categories = data.map((category) => {
      return(
        // edited out
      )
    })
    this.setState({categories: categories});
  })
 }
}

J'ai essayé ceci sur Chrome et Firefox; J'ai également essayé d'alias mon serveur loin de localhost. J'ai essayé l'approche no-cors, qui me permet d'y accéder - mais tout casse bien sûr. J'ai essayé avec et sans passer des en-têtes avec ma demande fetch.

METTRE À JOUR:

Je l’ai fait fonctionner en installant ce plugin Chrome . Je pense qu’il s’agit d’une solution de contournement et je voudrais savoir s’il existe une réponse codée ici.

javascriptphpreactjscorshttp-headers
5
KickingLettuce

Je suis un idiot.

Origin a été mal orthographié en tant que Orgin.

Cette faute de frappe existe dans mon projet depuis presque trois ans. C'était la première fois que je devais utiliser un accès entre domaines.

1
KickingLettuce
header("Access-Control-Allow-Methods: *");

Devrait être:

header("Access-Control-Allow-Methods: GET, POST, HEAD, OPTIONS, PUT, DELETE, PATCH");

... et toute autre méthode que vous avez l'intention d'accepter.

0
Dai