CORS Not Working With Fetch API In Browsers

Question

Hi,

I am having an issue with CORS and the Fetch API in browsers.

I am running a NodeJS server written using Express on localhost:5000 that accepts a GET request to the URL /get_a. This server is used to serve clients using my REST API.

In my server code, I use the Node module cors version 2.8.1 to enable CORS with Express. The implementation involves applying the module function as middleware in my application.

I can use the Insomnia REST API client to send an HTTP GET request to the URL. The server responds the JSON data that is supposed to be returned properly.

However, when I use the Fetch API in a browser to try and GET the same resource from the server, the console returns with the response TypeError: NetworkError when attempting to fetch resource. I suspect this has to do with my CORS configuration or something along those lines, because there appears to be no other problems with my code.

I have tried and tested the following code in Firefox 46.0.1 and Google Chrome 55.0 and both browsers tell me the request failed with messages similar to Access-Control-Allow-Origin header not set. However, Chrome also says this line: GET https://www.examplesite.com net::ERR_INSECURE_RESPONSE.

I have done a few hours of research already but none of the posts on Stack Exchange deal with the Fetch API and why it does not work in browsers. To this end, I am puzzled - it works fine in REST API testers and using the Linux GET command, so why should it not work with Fetch API in browsers?

Help is appreciated, thank you.

Here is my code below:

Server code:

...

var srv = express();
srv.use(cors());

srv.get("/get_a", function(req,res){
    res.json({"test":"hello"});
});

srv.listen(5000);

Browser Code

fetch(
    "http://127.0.0.1:5000/get_a",
    {
        mode : "cors"
    }
).
    then(function(r) {
        return r;
    })
    .then(function(r){
        console.log(r.json());
        return r;
    })
    .catch(function(e){
        console.log("error --> " + e);
        return e;
    })
    ;

Request Headers

GET /get_a HTTP/1.1
Host: 127.0.0.1:5000/
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
DNT: 1
origin: null
Connection: keep-alive
Cache-Control: max-age=0

Response Headers (From the REST API tester)

server: Cowboy
connection: close
x-powered-by: Express
access-control-allow-origin: *
content-type: application/json; charset=utf-8
content-length: 151
etag: W/"97-PwoFrPd7F7BFa7ZI257AdQ"
date: Wed, 14 Dec 2016 02:58:26 GMT
via: 1.1 vegur

Answer 1

It may be that you're using https and something is wrong with the SSL certificate

Start by following these instructions:

http://www.i-visionblog.com/2014/10/create-https-tls-ssl-application-with-express-nodejs-in-localhost-openssl.html

Answer 2

net::ERR_INSECURE_RESPONSE usually means there is an issue with the SSL configuration. Make sure you have a valid SSL certificate, and are not using a self-signed certificate.

Answer 3

I realized today that the following piece of code is faulty.

{mode:"cors"}

Don't use that, it messes stuff up.

Sorry for the confusion.