HTML5フェッチAPIを使用してAccess-Control-Allow-Originヘッダーを許可する

Question 1

HTML5フェッチAPIを使用しています。

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

通常のjsonを使用できますが、上記のapiURLのデータをフェッチできません。エラーをスローします：

FetchAPIはhttps://davidwalsh.name/demo/arsenal.jsonを読み込めません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost 'はアクセスを許可されていません。不透明な応答がニーズに対応する場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。

Question 2

epascarelloが言ったように、リソースをホストするサーバーではCORSを有効にする必要があります。クライアント側でできること（そしておそらくあなたが考えていること）は、フェッチのモードをCORSに設定することです（これは私が信じているデフォルト設定ですが）：

fetch(request, {mode: 'cors'});

しかし、これはまだCORSを有効にするには、サーバを必要としても、そしてあなたのドメインがリソースを要求することができます。

CORSドキュメントと、同一生成元ポリシーを説明するこの素晴らしいUdacityビデオを確認してください。

クライアント側でno-corsモードを使用することもできますが、これは不透明な応答を提供するだけです（本文を読み取ることはできませんが、応答はサービスワーカーによってキャッシュされたり、のような一部のAPIによって消費されたりする可能性があります<img>）：

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

Question 3

フロントエンドコードをhttp：// localhost：3000で実行し、API（バックエンドコード）をhttp：// localhost：5000で実行しました。

フェッチAPIを使用してAPIを呼び出していました。最初は、「cors」エラーをスローしていました。次に、これをバックエンドAPIコードに追加して、どこからでもオリジンとヘッダーを許可します。

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

ただし、stage、prodなどの他の環境の場合は、発信元を制限する必要があります。

Question 4

これは私のために働いた：

npm install -g local-cors-proxy

CORSの問題があるリクエストするAPIエンドポイント：

https://www.yourdomain.com/test/list

プロキシの開始：

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

次に、クライアントコードで、新しいAPIエンドポイント：

http://localhost:8010/proxy/test/list

最終結果は、CORSの問題なしでhttps://www.yourdomain.ie/test/listへのリクエストになります！

Question 5

これが古い投稿であることはわかっていますが、このエラーを修正するために機能したのは、フェッチリクエスト内でドメイン名を使用する代わりにサーバーのIPアドレスを使用することでした。したがって、たとえば：

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Question 6

nginxを使用している場合は、これを試してください

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

Question 7

データをリクエストするサーバー側でcorsヘッダーを設定する必要があります。たとえば、バックエンドサーバーがRuby on Railsにある場合は、応答を返す前に次のコードを使用します。すべてのバックエンドサーバーに同じヘッダーを設定する必要があります。

headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

Question 8

https://expressjs.com/en/resources/middleware/cors.htmlを見てください。corsを使用する必要があります。

インストール：

$ npm install cors

const cors = require('cors');
app.use(cors());

このコードをノードサーバーに配置する必要があります。