I have seen dozens of questions on SO and different blogs talking about this with "answers" -- all to no avail.

I have a React.js app on my local machine (Ubuntu 16.04). Locally, I try to test it by running npm start and it opens up the browser to http://localhost:3000.

On one page, I am trying to access my PHP api which is on my shared hosting server.

Chrome and Firefox both say that it fails due to server not having Access-Control-Allow-Orgin.

Exact Message:

Failed to load http://---/api/v1/categories: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ':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/:1 Uncaught (in promise) TypeError: Failed to fetch

However, upon my php server entry point I do have:

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

Here is where I make my api call in my react app:

 ponentDidMount() {

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

I have tried this on both Chrome and Firefox; I have also tried to alias my server away from localhost. I have tried the no-cors approach, which does get me access -- but breaks everything of course. I have tried with and without passing headers along with my fetch request.

UPDATE:

I did get it to work by installing this Chrome plugin. I feel this is a workaround and would like to know if there is a coding answer here.

I have seen dozens of questions on SO and different blogs talking about this with "answers" -- all to no avail.

I have a React.js app on my local machine (Ubuntu 16.04). Locally, I try to test it by running npm start and it opens up the browser to http://localhost:3000.

On one page, I am trying to access my PHP api which is on my shared hosting server.

Chrome and Firefox both say that it fails due to server not having Access-Control-Allow-Orgin.

Exact Message:

Failed to load http://---/api/v1/categories: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost.: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./:1 Uncaught (in promise) TypeError: Failed to fetch

However, upon my php server entry point I do have:

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

Here is where I make my api call in my react app:

 ponentDidMount() {

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

I have tried this on both Chrome and Firefox; I have also tried to alias my server away from localhost. I have tried the no-cors approach, which does get me access -- but breaks everything of course. I have tried with and without passing headers along with my fetch request.

UPDATE:

I did get it to work by installing this Chrome plugin. I feel this is a workaround and would like to know if there is a coding answer here.

• javascript
• php
• reactjs
• cors
• http-headers

• Access-Control-Allow-Orgin - try Access-Control-Allow-Origin, would that be it? – Tomasz Bubała Commented Feb 23, 2018 at 20:55
• 1 Neither Access-Control-Request-Headers nor Access-Control-Request-Method allow a * wildcard value. The first one needs to be a list of actual request headers that the request will use, and the second one has to specify one request method. But you are making a run-of-the-mill GET request here, not even sending credentials - so what are you setting those headers for in the first place? They are for cases that require a pre-flight request - which a normal GET doesn't. – C3roe Commented Feb 23, 2018 at 20:58
• @CBroe Ok, so I remove the headers in the request (as stated in the question), it still doesn't work. So this is not the issue by itself. But still good info to know, thanks. – TheLettuceMaster Commented Feb 23, 2018 at 21:01
• Quote the exact error message please. – C3roe Commented Feb 23, 2018 at 21:26
• @CBroe added the message; there are two, not sure if the second is related. – TheLettuceMaster Commented Feb 23, 2018 at 21:28

2 Answers 2

I'm an idiot.

Origin was misspelled as Orgin.

This typo has existed in my project for almost three years. This was the first time I needed to use cross-domain access.

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

Should be:

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

...and any other methods you intend to accept.