"Uncaught (in promise) SyntaxError: Unexpected end of input" using fetch from Chrome

Question

Objective: provide some basic data from Express JS to browser requests, all running locally on localhost.

When I connect to the URL (http://localhost/test) with the browser directly I see the data I'm trying to receive in the browser window. However, when I execute the following code in a tag in an HTML document I get "Uncaught (in promise) SyntaxError: Unexpected end of input" and no data retrieved.

        fetch('http://localhost/test', {
        'content-type': 'application/json',
        mode: 'no-cors',
        method: 'GET',
        redirect: 'follow'
    })
        .then(response => response.json())
        .then(json => console.log(json))

Here's my Express code:

    app.get("/test", (req, res) => {
        res.header(
            "Access-Control-Allow-Origin","http://localhost:*"
        )
        res.json( {username: 'Joe'})
    });

I started without the "res.header" above but after many searches found that as a suggestion. CURL and XMLHttpRequest both work fine.

Answer 1

I've seen something somewhat related recently. I think the problem might be that you are using a no-cors mode, which expects an opaque response. I'm no specialist in the matter but I suggest you check the link I shared.

I had a similar issue in vanilla JS and a REST API running on Azure (Function App). In my JS code, I removed the no-cors mode for the request; and in the REST API providing the response, I changed the allowed origins to * wildcard. Hope it's of any help.