/ / SinatraでのクロスドメインAJAXリクエストが機能しない-jQuery.ajaxでJSONを送信する-jquery、ajax、sinatra

SinatraとのクロスドメインAJAX Requestが機能しない - jQuery.ajaxを使ってJSONを送信する - jquery、ajax、sinatra

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つに直面しています。

  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をリクエストできるかを定義するからです。

  1. あなたの問題は最初に言及されたものである可能性が高いですが、後でこれに直面するでしょう。

一部の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.