sinatraアプリのサーバーには、次の設定があります。
before do
headers "Access-Control-Allow-Origin" => "*",
"Access-Control-Allow-Methods" => ["OPTIONS", "GET", "POST"],
"Access-Control-Allow-Headers" => ["Content-Type", "Accept", "X-Requested-With", "access_token"]
env["rack.errors"] = error_logger
end
フロントエンドアプリで、次のhttpリクエストを実行します。
$.ajax({
type: "POST",
url: "http://findaspot.multimediatechnology.at/api/",
data: json,
dataType: "json",
success: function (data) {
console.log("Success!");
console.log(data);
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
})
私はいつもこのエラーメッセージを受け取る:
XMLHttpRequest cannot load http://findaspot.multimediatechnology.at/api/. Invalid HTTP status code 404
このエラーは、サーバーへのプリフライトOPTIONSリクエストと関係があります-JSONを送信しているため、jQuery.ajaxオプションの「async」をfalseに設定しようとしましたが、どちらも機能しませんでした。
これまでのところ、これを解決する方法はありません。皆さんが私を助けてくれるといいと思います。
回答:
回答№1は2この2つの問題の1つに直面しています。
- エラーは404について通知するため、Sinatraでは、そのURLのOPTIONSメソッドを使用するルート(コントローラー)を作成していません。404エラーは正しいです。
GET、POST、PUT、DELETEルートを作成するのと同じ方法でこのルートを指定できますが、これを before
フィルタ:
# return directly with 200 if request method is options
halt 200 if request.request_method == "OPTIONS"
これにより、すべての着信OPTIONS要求が200 OKで承認されます。もう404はありません。これはセキュリティ上の問題ではありません。どのオリジンがCORS方式でAPIをリクエストできるかを定義するからです。
- あなたの問題は最初に言及されたものである可能性が高いですが、後でこれに直面するでしょう。
一部のHTTPアクションのCORSの世界では、オリジン(Access-Control-Allow-Origin
)「どのホストにも設定できません(*
)。
次のように正しい起点を指定することにより、この問題を解決できます。
"Access-Control-Allow-Origin" => "https://the.url.sending.requests.to.the.api"
通常、別のAPIを呼び出したい異なる環境(開発、テスト、ステージ、実稼働)があるため。これをアーカイブするには、許可されているオリジンを要求している環境に設定するビットコードが必要です。 しかし、注意してください、すべてを許可することをしないでください!
可能な方法は、許可された起点をアプリケーション構成で手動で定義することです。 CORSリクエストが届くと、 before
信頼できる1つの発信元からリクエストが送信された場合にフィルタリングし、その場で設定します Access-Control-Allow-Origin
.