How to make a "simple" GET request if the resource doesn't allow CORS?

Question

I'm trying to use W3C's CSS Validator Web Service API in a Chrome new tab extension. The docs claim that a request is a simple HTTP GET call to a URI, so I figured this should work:

fetch('http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json')
.then((response) => {
  // do stuff with response
});

Unfortunately the promise fails and I get a message like:

Failed to load. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.

How am I supposed to make a "simple" GET request if the resource doesn't allow CORS?

Thanks!

I get this error: `No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://blah-blah.com' 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.` And if I set `{mode: 'no-cors'}` it works fine. — Anthony, Oct 20 '17 at 19:32

sideshowbarker · Accepted Answer · 2022-03-11T14:25:09.977

2017-10-22 Update: The change for adding CORS support to the CSS Validator was merged and pushed to production, so the following now works as-is:

const validatorURL = 'https://jigsaw.w3.org/css-validator/validator' +
  '?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json';
fetch(validatorURL)
  .then(response => response.json())
  .then(results => console.log(results))

Original answer:

The CSS Validator doesn’t send the necessary CORS response headers. To fix that, I’ve raised a pull request with a change against the CSS Validator sources that’ll enable your code snippet to work as-is. I’ll post an update here once the change is merged and pushed to production.

In the meantime, you can work around the issue by making your request through a CORS proxy:

const proxyURL = 'https://cors-anywhere.herokuapp.com/';
const validatorURL = 'http://jigsaw.w3.org/css-validator/validator' +
  '?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json';
fetch(proxyURL + validatorURL)
  .then(response => response.json())
  .then(results => console.log(results))

For details abou why that works, see the How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems section of the answer at No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API.

score 0 · Answer 2 · answered Oct 20 '17 at 19:39

0

You need to register the allowed origin for the extension's manifest:

  "permissions": [
    "http://jigsaw.w3.org/"
  ],

And you might need to set the origin mode for the fetch function as well:

fetch(
 'http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json', 
  {mode: 'no-cors'})
.then((response) => {
  // do stuff with response
});

answered Oct 20 '17 at 19:39

Anthony

36,459
25
97
163

Setting `mode: 'no-cors'` will prevent the rest of that code from having any access to do stuff with the response. See the answer at https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input/43319482#43319482 – sideshowbarker Oct 20 '17 at 22:43

score 0 · Answer 3 · answered Oct 21 '17 at 05:53

0

From chrome web store you can add CORS Filter extension. just enable the filter before you run your code.

From here you can add the filter to your chrome browser.

answered Oct 21 '17 at 05:53

ajithes1

433
2
11
28

How to make a "simple" GET request if the resource doesn't allow CORS?

3 Answers3