フェッチ専用オプションを使用してget要求を作成すると、

Question

フェッチを使用してget要求を作成しようとしています。要求は次のようになります。

fetch('https://requestb.in/14ikb6j1', { 
    method: 'get', 
    headers: { 
    'Authorization': 'Token token=xxxxx' 
    }}); 

自分のサーバーにこの要求を行うと、毎回オプション要求が失敗します。なぜ私は理解できません。

このリクエストをrequestbinに行うと、最初にオプションのリクエストがあります。しかし、options応答を受け取った後、実際のget要求は決して行われません。

これは、受信requestbinです：

OPTIONS /14ikb6j1 

HEADERS 

Referer: http://localhost:9000/ 
Host: requestb.in 
Total-Route-Time: 0 
Via: 1.1 vegur 
Accept-Encoding: gzip 
Cf-Visitor: {"scheme":"https"} 
Cf-Ipcountry: NL 
Cf-Ray: 36edd35d1cad2b28-AMS 
Cf-Connecting-Ip: 37.153.231.90 
Connection: close 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 
Accept: */* 
Connect-Time: 1 
Access-Control-Request-Method: GET 
Content-Length: 0 
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4 
X-Request-Id: 69b120c1-0f18-454b-a7fd-91f082252a06 
Access-Control-Request-Headers: authorization 
Origin: http://localhost:9000 

これはどのようなクロームのログです：奇妙なことは、私は結果として200 - OKのステータスを取得するには、ある

---

。コンソールは、しかし、まだこのログに記録されます：

Fetch API cannot load https://requestb.in/14ikb6j1 . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:9000 ' 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. :9000/#/branching:1 Uncaught (in promise) TypeError: Failed to fetch

をしかし、私はポストマンを使用してこの要求を行う場合には、作業を行います。私は、認証ヘッダを持つこのGETリクエストを動作させることができますどのように

GET /14ikb6j1 
HEADERS 

Cf-Ipcountry: NL 
Cf-Ray: 36eddb797ebf7223-AMS 
Authorization: Token token=xxxx 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 
Total-Route-Time: 0 
Via: 1.1 vegur 
Connection: close 
Cf-Connecting-Ip: 37.153.231.90 
Connect-Time: 0 
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4 
Postman-Token: 57486701-6f9a-4aab-be1b-776f0d376920 
Accept: */* 
Host: requestb.in 
X-Request-Id: 73a7a35e-0d89-41fd-b760-2aa952349871 
Accept-Encoding: gzip 
Cf-Visitor: {"scheme":"https"} 
Cache-Control: no-cache 

を？

Answer 1

これはおそらくCORSの問題です。要求をバインドしているサーバーは、別のドメインからの要求を許可しません。 ブラウザのコンソールを確認し、エラーを探します。

Fetch API cannot load https://requestb.in/14ikb6j1 . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://localhost:9000 ' 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.