リソースがCORSを許可していない場合、「単純な」GETリクエストを作成するにはどうすればよいですか？

Question

Chromeの新しいタブ拡張でW3CのCSS検証ツールWebサービスAPIを使用しようとしています。

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

残念ながら、約束は失敗し、私のようなメッセージが出ます：：

どう

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

を要求がシンプルなHTTP URIにGET呼び出しですので、私は、これは動作するはず考え出しことThe docs主張リソースが許可されていない場合は、私は "単純な" GETリクエストをするつもりですCORS？

ありがとうございます！あなたが拡張機能のマニフェストのためregister the allowed originに必要

Answer 1

2017年10月22日の更新：change for adding CORS support to the CSS Validatorが統合され、プロダクションにプッシュされたので、次のようにそのまま動作します。

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

---

オリジナルの答え：

CSS Validatorは、単に必要なCORSレスポンスヘッダを送信しません。この問題を解決するために、コードスニペットをそのまま使用できるようにするraised a pull request with a change against the CSS Validator sourcesがあります。変更が統合されて本番環境にプッシュされると、私はここに更新を掲載します。どのようにを参照してください、それが動作する理由の一般的な説明については

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

：

一方

、あなたはCORSプロキシを介して、あなたの要求を行うことで問題を回避することができますCORSプロキシを使用して、No Access-Control-Allow-Originヘッダーの問題セクションの回答をNo 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST APIにしてください。

Answer 2

：

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

そして、あなたが同様の機能をフェッチするためにset the origin modeに必要になる場合があります。

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

クロムウェブストアからCORSフィルタ拡張機能を追加できます。コードを実行する前にフィルタを有効にしてください。

hereからフィルタをクローム・ブラウザに追加できます。