title: ReactJS API Data Fetching CORS error
body: <p>I've been trying to create a react web app for a few days now for my internship and I've encountered a CORS error. I am using the latest version of reactJS, and placing this in the <code>create-react-app</code>, and below is the code for  fetching:</p>
  
  <pre><code>componentDidMount() {
    fetch('--------------------------------------------',{
      method: "GET",
      headers: {
        "access-control-allow-origin" : "*",
        "Content-type": "application/json; charset=UTF-8"
      }})
    .then(results =&gt; results.json())
    .then(info =&gt; {
      const results = info.data.map(x =&gt; {
        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))
   }
  </code></pre>
  
  <p>I'm sorry that I can't post the url for the API due to company rules, however, it is confirmed that there are no CORS setting in the API backend.</p>
  
  <p>However, I encounter the following errors when run on mozilla</p>
  
  <pre><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
  </code></pre>
  
  <p>and</p>
  
  <pre><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).
  </code></pre>
  
  <p>If run on chrome it gives the following error</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
  </code></pre>
  
  <p>and </p>
  
  <pre><code>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.
  </code></pre>
  
  <p>and </p>
  
  <pre><code>Uncaught (in promise) TypeError: Failed to fetch
  </code></pre>
  
  <p>Another thing is that I am able to open the url in my browsers with no problems or whatsoever.</p>
  
  <p>Please help and thanks!</p>
  
  <p><strong>Additional Information</strong></p>
  
  <p>The reason I added the CORS setting is because it gives a CORS error, so removing it does not really solve the issue. </p>
  
  <p>Next I tried to perform proxy setting, however, it now gives </p>
  
  <pre><code>Unhandled Rejection (SyntaxError): Unexpected token &lt; in JSON at position 0
  </code></pre>
  
  <p>According to the internet this is caused becasue the response is not a JSON. However when I checked the API it gives this</p>
  
  <p><a href="https://i.stack.imgur.com/LVTJ6.png" rel="noreferrer">api img</a></p>
  
  <p>which means that return type should be a JSON right?</p>
  
  <p><strong>Additional Info</strong></p>
  
  <p>checking the respond will yield this</p>
  
  <p>{"status":200,"total":1,"per_page":3,"current_page":1,"last_page":1,"next_page_url":null,"prev_page_url":null,"from":1,"to":3,"data":[{"id":1,"slug":"america","name":"america","address_1":"USA Court","address_2":"USA","city":"USA","state":"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"}]}</p>