$ .ajax postリクエストのヘッダーフィールドContent-Typeは許可されていません。CORS

Question

CORSリクエストの作成中に次のエラーが発生します。興味深いことに、これはサファリでは動作しますが、Google ChromeやFirefoxでは動作しません。私はすべてを見てきましたが、Web上には解決策が見つかりませんでした。

jsonをサーバーに送信しようとしていますが、サーバーに送信する前に文字列を作成する必要があるため、JSON.stringifyを使用していますが、最終的にはサーバーからjson結果を期待しています。

これは、私がカールコールになっているものです。

HTTP/1.1 200 OK 
Date: Tue, 18 Apr 2017 15:13:04 GMT 
Server: Apache 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Headers: Content-Type 
Access-Control-Allow-Methods: POST, OPTIONS 
Access-Control-Max-Age: 21600 
Content-Length: 213 
Content-Type: application/json 

（私は、ヘッダーを確認するためにそれを試してみました）、これは私はクローム

と私のコード

function foo(api_key, url, query, pdata, callback) { 
     var result = 'none'; 
     if (typeof pdata != "undefined"){ 
      var mydata = {"api_key": api_key, "query": query, "data": pdata }; 
     } 
     else { 
      var mydata = {"api_key": api_key, "query": query}; 
     } 
     $.ajax({ 
       method : "POST", 
       url : url, 
       data: JSON.stringify(mydata), 
       contentType: "application/json;charset=UTF-8", 
       cache: false, 
       dataType: "json", 
       success : function(data) { 
       console.log("API call is working successfully!") 
       callback(data); 
       result = data 
     }, 
     error: function(data, status, error) { 
       console.log("API call failed!") 
     } 
    }); 
    return result; 
    } 

最後の部分でネットワークタブ上で取得していますものです

これは私が得ているエラーです。

私は何をしなければならないのですか、変更したり、追加してChromeやFirefoxで動作させる必要がありますか？

Answer 1

問題が解決しました。クライアント側のすべてが正しい

は、サーバ

from flask_cors import CORS 

と@WitVaultは、これらの設定は、私の問題を解決してサーバを設定すると言うようにCORSのLIBを使用し始めました！

cors = CORS(app, resources={r"/api/*": {"origins": "*"}}) 
app.config['CORS_HEADERS'] = 'Content-Type' 

Answer 2

あなたのajaxリクエストは正しいようですが、問題はサーバー側にあります。 corsリクエストブラウザごとにプリフライトリクエストを送信してください。 preflightリクエストがサーバー側から検証されると、cors ajaxリクエストを送信できます。

プリフライトリクエストには、ブラウザに適切な応答を送信する必要があります。

適切な応答手段は、プリフライトリクエストの応答に適切なヘッダーを設定して、クライアント、つまりブラウザに送り返します。

curlの場合、curlリクエストはサーバー側でプリフライトリクエストの検証を行わないため、その必要はありません。

セキュリティ上の理由から、ブラウザの場合のみ必要です。

の例では、このようなことができ -

HttpResponse response = new HttpResponse(request.getProtocolVersion(), NO_CONTENT); 
    HttpHeaders headers = response.headers(); 

    headers.set(HttpHeaders.Names.CONNECTION, HttpHeaders.Values.CLOSE); 
    headers.set(CONTENT_TYPE, "text/plain; charset=UTF-8"); 
    headers.set(CACHE_CONTROL, "max-age=31536000, public"); 
    headers.set(ACCESS_CONTROL_ALLOW_ORIGIN, request.headers().get("Origin")); 
    headers.set(ACCESS_CONTROL_ALLOW_CREDENTIALS, "true"); 
    headers.set(ACCESS_CONTROL_MAX_AGE, "31536000"); 
    headers.set(ACCESS_CONTROL_ALLOW_METHODS, "POST, GET, OPTIONS"); 
    headers.set(ACCESS_CONTROL_ALLOW_HEADERS, request.headers().get("Access-Control-Request-Headers")); 
    headers.set(ACCESS_CONTROL_ALLOW_CREDENTIALS, "true"); 
    send(response); 

これはあくまでも一例ですが、あなたはあなたの側でそれを行う方法を完全に使用しているサーバー側とサーバーフレームワークに依存します。

Answer 3

content-typeを設定しているのに実際にはpreflightリクエストが失敗していますが、応答にはContent-Typeヘッダーがありません。

content-type〜jsonの代わりにtext/plain, form-dataを使用してプリフライトリクエストをバイパスし、クロスドメインサーバーに直接ajaxリクエストを送信してください。

またはサーバにAccess-Control-Allow-Headers:Content-Typeヘッダーを設定します。アパッチ

Header set Access-Control-Allow-Headers "Content-Type"

にヘッダを設定する

が動作します。