4

I can't enable CORS on the server-side. My frontend and backend servers have different ports. Here is how server-side is implemented:

http .createServer(function (req, res) { // .. Here you can create your data response in a JSON format // const { headers, method, url } = req; // let body = []; res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Request-Method', '*'); res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET'); res.setHeader('Access-Control-Allow-Headers', '*'); if (req.method === 'OPTIONS') { res.writeHead(200); res.end(); return; } // const responseBody = { headers, method, url, body: JSON.stringify(data) }; response.write('{asd: 123}'); // Write out the default response res.end(); //end the response }) .listen(port);

And I call the fetch function from the frontend-side like this one:

fetch('http://localhost:3035', { method: 'POST', mode: 'same-origin', // no-cors, *cors, same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'include', // include, *same-origin, omit headers: { 'Content-Type': 'application/json', // 'Content-Type': 'application/x-www-form-urlencoded', }, body: JSON.stringify(line), // body data type must match "Content-Type" header }) .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.log(error));

But still getting errors:

Security Error: Content at http://localhost:3030/ may not load data from http://localhost:3035/.

TypeError: "NetworkError when attempting to fetch resource."

Improve this question
2
  • 1
    @CherryDT - write that up as an answer Commented Jul 25, 2020 at 12:47
  • 1
    Your default response is not valid json. Also sending POST but only allowing GET Commented Jul 25, 2020 at 13:24

1 Answer 1

Reset to default
3

You explicitly disallowed CORS on the client side by setting mode: 'same-origin' instead of the default mode: 'cors'.

To quote the docs:

same-origin — If a request is made to another origin with this mode set, the result is simply an error. You could use this to ensure that a request is always being made to your origin.

Since http://localhost:3035/ is another origin than http://localhost:3030/, the result is, exactly as designed, "simply an error".

Set it to mode: 'cors' or remove mode entirely since cors is the default anyway.

On a side note, Access-Control-Request-Method is a request header in the preflight request, not a response header. You should remove it.

As mentioned in the comments: For a credentialed request to work, you cannot use an allowed origin of *. If you don't want to hardcode the expected origin at this point though, you can avoid this problem by always returning the origin that the current request comes from, using res.setHeader('Access-Control-Allow-Origin', req.headers.origin).

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

What do you mean when you say you "set the origin"? What response headers do you see returned from your API when you look at the network tab?
If you see that error it means that you are making a credentialed request. This means either your request has a session cookie or has an Authentication header or has an Authorization header. Just sending back Access-Control-Allow-Credentials to true is not enough. One thing you need to know about credentialed requests is that browsers ban the origin * for such requests and disallows origin lists (sending more than one url as Access-Control-Allow-Origin. The only thing that will work is to do res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3030') -- note NOT 3035
.. for the general case you should do res.setHeader('Access-Control-Allow-Origin', req.headers.origin) - @CherryDT can you include this info in your answer?
Oh. Forgot to mention. If you really want to use CORS for it's intended use - to ban other websites from using your API - you can check req.headers.origin and see if it matches your list of allowed websites: if (req.headers.origin.match(SOME_RULE) {res.setHeader('Access-Control-Allow-Origin', req.headers.origin)}
@ЯрославТерещук - just do res.setHeader('Access-Control-Allow-Origin', req.headers.origin)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.