2016-03-05 2 views
6

Firefox 44.0.2ブラウザのhttp://localhost:3000で実行中のecmascript 7ブラウザアプリケーションがあります。これは、https://localdev.net:8443で動作するBeego 1.6.0サーバーに送信されています。 'localdev.net'は同じボックスにあり、ローカルホストアドレスに解決されます。ブラウザのコードは次のとおりです。FirefoxからBeegoサーバーへのCORSのフェッチは、フライト前に停止する

var serverURL = 'https://localdev.net:8443/v1/user/login' 
fetch(serverURL, { 
    method: 'post', 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 
    mode: 'cors', 
    cache: 'default', 
    body: JSON.stringify({username: this.state.username, password: this.state.password}) 
}) 
.then(function(response){ 
    if (response.status >= 200 && response.status < 300) { 
    return Promise.resolve(response) 
    } 
    return Promise.reject(new Error(response.statusText)) 
}) 
.then(function(data){ 
    console.log('data: ' + data) 
}) 
.catch((err) => console.error(serverURL, err.toString())) 

}次のようにビーゴサーバがCORS要求を処理するように設定されて

beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{ 
    AllowOrigins:  []string{"*"}, 
    AllowMethods:  []string{"*"}, 
    AllowHeaders:  []string{"Origin"}, 
    ExposeHeaders: []string{"Content-Length"}, 
    AllowCredentials: true, 
})) 

Wiresharkのは、CORSオプションがする要求飛行前を送信するクライアントを見てサーバー:

OPTIONS /v1/user/login HTTP/1.1\r\n 
Host: localdev.imaginout.net:8443\r\n 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:44.0) Gecko/20100101 Firefox/44.0\r\n 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8\r\n 
Accept-Language: en-US,en;q=0.5\r\n 
Accept-Encoding: gzip, deflate, br\r\n 
Access-Control-Request-Method: POST\r\n 
Access-Control-Request-Headers: content-type\r\n 
Origin: http://localhost:3000\r\n 
Connection: keep-alive\r\n 

対応して、beegoサーバーは、出力:

2016/03/05 12:54:29 [router.go:828][D] | OPTIONS | /v1/user/login       | 102.08µs   | not match | 

サーバが「一致しない」と言っていますが、wiresharkの応答を記録します

HTTP/1.1 200 OK\r\n 
Access-Control-Allow-Credentials: true\r\n 
Access-Control-Allow-Origin: http://localhost:3000\r\n 
Access-Control-Expose-Headers: Content-Length\r\n 
Server: beegoServer:1.6.0\r\n 
Date: Sat, 05 Mar 2016 17:54:29 GMT\r\n 
Content-Length: 0\r\n 
Content-Type: text/plain; charset=utf-8\r\n 

私にとって、と200のステータスアクセス制御 - 許可 - 起源は、ブラウザアプリのドメインに設定CORSの飛行前には成功したことを示しているが、Firefoxの開発者コンソールは示しています

"https://localdev.net:8443/v1/user/login" TypeError: NetworkError when attempting to fetch resource. 

だから、アプリおよび/またはFirefoxは、要求が失敗したと考えているようです。 Wiresharkは、アプリケーションがサーバーに別のリクエストを送信しないことを示しています。私はポストを期待しています。

CORSに関して多くの質問がありますが、ブラウザ/ API /サーバーは非常に可変なので、完全一致は見つかりませんでした。それを掘り起こすが、どんな助けもありがたい。

+0

Chromeからリクエストを実行しようとしましたが、デベロッパーコンソールで追加のエラーが発生しました。「プリフライトレスポンスでヘッダーフィールドのcontent-typeのリクエストがAccess-Control-Allow-Headersで許可されていません。このエラーが発生すると、 "TypeError:Failed to fetch"というメッセージが表示されます。 –

+0

Beego設定でAllowHeadersを "Origin、Content-Type"に設定しても、同じエラーが発生します。 Beegoによって送信された飛行前応答には、「Origin、Content-Type」に設定されたAccess-Control-Allow-Headersは含まれていません。私はそれがすべきだと思う。 –

答えて

3

固定。 Beego CORSオプションのAccess Control-Allow-Headerを[] string {"Origin"、 "Content-Type"}に設定する必要があります。その後、Access-Control-Allow-Headersが正しく設定され、プレフライトが成功します。その後、メインポストは成功します。

関連する問題