Using HTML5 Fetch API : CORS errors


#1

Hi !

I try to test a little sample code using fetch and I can’t make it work due to CORS errors. The file I request is a simple html piece of code I’d like to insert in my page. On a local server it works well.

fetch('content.html').then(function(response) {  

var sandbox = document.getElementById('sandbox');

response.text().then(function(resolvedResponse){
    
    sandbox.innerHTML = resolvedResponse;
});

}, function(error){

console.log('fetch error : ' + error);

});

Here is the error : Cross-Origin
Request Blocked: The Same Origin Policy disallows reading the remote
resource at
https://c9users.io/_user_content/authorize?redirect=https%3A%2F%2Fsandbox-olimeunier.c9users.io%2FHTML5_APIs%2FFetch%2Fcontent.html.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I’ve tried to change the mode (same-origin, cors, no-cors), no changes.

Thanks.


#2

Typically you have to address acceptable URL domains in your service configuration whether it be Express, Web API, WCF or other. Look to your API code and setting headers.


#3

It seems indeed an issue with the way Cloud9 proxies requests, not sure if they could clarify what are the settings for c9users.io, because they seem to block and redirect this type of requests:

Fetch API cannot load https://c9users.io/_user_content/authorize?redirect=https%3A%2F%2F-xxxxxxx-gabrielgil.c9users.io%2Fbundle.js. Redirect from 'https://c9users.io/_user_content/authorize?redirect=https%3A%2F%2Fxxxxxxx-gabrielgil.c9users.io%2Fbundle.js' to 'https://c9.io/api/nc/auth?response_type=token&client_id=user.content&state=https%3A%2F%2Fxxxxxxx-gabrielgil.c9users.io%2Fbundle.js' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://octavo-webapp-gabrielgil.c9users.io' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

#4

This seems to be solved as from yesterday at least in my experience.


#5

Hmm, still getting the same error. Mine is for Swagger-UI v3, which uses Fetch (v2 doesn’t have this problem).