I'm trying to use fetch function to retrieve data from server in a client side Javascript code. And I'm using the polyfill version of fetch named whatwg-fetch in a Chrome (which supports fetch internally).

Here's how I call the function:

//Called in a page loaded as http://localhost:3236/
fetch("http://localhost:8080/list", {
         mode: 'no-cors',
         credentials: "include", 
    })
    .then(function(response) {
        return response.json();
    });

As you can see my application server is not the same as my resource server so I had to set the options for CORS. The problem is that the response has got no content:

{
    body: null,
    bodyUsed: false,
    headers: Headers,
    ok: false,
    status: 0,
    statusText: "",
    type: "opaque",
    url: "",
}

It's in the case that when I turn to network panel and find the request sent, it seems all OK with Status of 200 and the requested data.

How can I find what the problem is?

I'm trying to use fetch function to retrieve data from server in a client side Javascript code. And I'm using the polyfill version of fetch named whatwg-fetch in a Chrome (which supports fetch internally).

Here's how I call the function:

//Called in a page loaded as http://localhost:3236/
fetch("http://localhost:8080/list", {
         mode: 'no-cors',
         credentials: "include", 
    })
    .then(function(response) {
        return response.json();
    });

As you can see my application server is not the same as my resource server so I had to set the options for CORS. The problem is that the response has got no content:

{
    body: null,
    bodyUsed: false,
    headers: Headers,
    ok: false,
    status: 0,
    statusText: "",
    type: "opaque",
    url: "",
}

It's in the case that when I turn to network panel and find the request sent, it seems all OK with Status of 200 and the requested data.

How can I find what the problem is?

• javascript
• cors
• cross-domain
• fetch-api

Share Improve this question Follow edited Jul 10, 2016 at 22:20 Bergi 666k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Jul 10, 2016 at 21:45 MehranMehran 17k3131 gold badges142142 silver badges247247 bronze badges 2

• Note that Chrome can display blank response data if the expected result was for example application/json, but the HTTP response body cannot be parsed for whatever reason (i.e. invalid formatting). In cases like this, I'd generally open up Fiddler and check the raw response. – brendonofficial Commented Jul 10, 2016 at 22:09
• Doesn't Chrome's raw response panel count? I can see my desired response there. I only can not receive it in JS! – Mehran Commented Jul 10, 2016 at 22:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The clue is in the opaque key. The request was successful, but Chrome's CORS restrictions are preventing you from using the returned data. The no-cors option is suspect; it shouldn't be necessary if your server is correctly configured for cross-origin requests.

N.B. If you've configured everything correctly but you're experiencing errors while testing the client locally, it may be sufficient to launch Chrome with the --disable-web-security flag.