Comment faire une requête GET "simple" si la ressource n'autorise pas CORS?

Question

J'essaie d'utiliser l'API de service Web CSS Validator du W3C dans une nouvelle extension d'onglet Chrome. The docs affirmation selon laquelle une demande est simple HTTP GET appel à un URI, donc je me suis dit que cela devrait fonctionner:

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 
}); 

Malheureusement, la promesse échoue et je reçois un message comme:

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

Comment suis-je censé faire une requête "simple" GET si la ressource ne permet pas CORS?

Merci!

Answer 1

2017-10-22 Mise à jour: Lechange for adding CORS support to the CSS Validator a été fusionné et poussé à la production, de sorte que ce qui suit fonctionne maintenant tel quel:

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))

---

réponse originale:

Le CSS Validator n'envoie pas seulement les en-têtes de réponse CORS nécessaires. Pour résoudre ce problème, j'ai raised a pull request with a change against the CSS Validator sources qui permettra à votre extrait de code de fonctionner tel quel. Je posterai une mise à jour ici une fois que le changement aura été fusionné et poussé à la production.

En attendant, vous pouvez contourner le problème en faisant votre demande via un proxy CORS:

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))

Pour une explication générale des raisons pour lesquelles cela fonctionne, voir le Comment utiliser un proxy CORS pour contourner "No Access-Control-Autoriser-en-tête" problèmes section de la réponse à No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API.

Answer 2

Vous devez register the allowed origin pour le manifeste de l'extension:

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

Et vous pourriez avoir besoin de set the origin mode pour la fonction de récupération ainsi:

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 
}); 

Answer 3

De la boutique en ligne chrome, vous pouvez ajouter l'extension CORS Filter. Activez simplement le filtre avant d'exécuter votre code. De here Vous pouvez ajouter le filtre à votre navigateur Chrome.