-1

Hello I've looked around and tried a few things and can't get this to work.

I have this fetch request:

  index = () => {
    return fetch(`${baseUrl}api/deliveries`, {
      method: 'GET',
      headers: new Headers({
        'Access-Control-Allow-Origin': 'http://localhost:3000',
        'Content-Type': 'application/json',
      }),
    })
      .then(res => res.json());
  }

I get this error in console:

Failed to load http://localhost:8000/api/deliveries: 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 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Error states 'Access-Control-Allow-Origin'is not present. But it is. Its there.

Any ideas?

joeyk16
  • 1,357
  • 22
  • 49
  • 1
    Read the error message. "present on the requested resource" — Not the request. The resource. It is a **response** header. – Quentin Feb 08 '18 at 10:45
  • 1
    Why are you setting a Content-Type header on a GET request? There is no content in the request body to describe the type of. – Quentin Feb 08 '18 at 10:46
  • note. Adding arbitrary non-sensical headers to a cross origin request will usually result in a OPTIONS preflight - so, you may think your server is set up correctly, but if it doesn't handle an OPTIONS request properly, then you will get failures – Jaromanda X Feb 08 '18 at 10:51

2 Answers2

1

You don't need to send this header, it needs to be present in the response from the server.

Tom Fenech
  • 72,334
  • 12
  • 107
  • 141
0

It should be in the response of the OPTIONS request on the server, as the error messages says.

Mario Murrent
  • 712
  • 5
  • 24