Flask][4]に組み込まれたRESTful[API][3]に接続し、JavaScriptを使って認証を行おうとしています。しかし、リクエストを行うと、以下のようなエラーが発生します。
XMLHttpRequest cannot load http://myApiUrl/login.要求されたリソースに 'Access-Control-Allow-Origin'ヘッダが存在しません。そのためOrigin 'null'へのアクセスが許可されていません。
APIやリモートリソースがヘッダーを設定しなければならないことはわかっていますが、Chromeの拡張機能Postmanを使ってリクエストしたときは、なぜうまくいったのでしょうか。
これがリクエストコードです。
$.ajax({
type: "POST",
dataType: 'text',
url: api,
username: 'user',
password: 'pass',
crossDomain : true,
xhrFields: {
withCredentials: true
}
})
.done(function( data ) {
console.log("done");
})
.fail( function(xhr, textStatus, errorThrown) {
alert(xhr.responseText);
alert(textStatus);
});
[3]: http://en.wikipedia.org/wiki/Application_programming_interface [4]: https://en.wikipedia.org/wiki/Flask_%28web_framework%29
私の理解が正しければ、あなたはページとは異なるドメインに対してXMLHttpRequestを行っています。つまり、ブラウザはセキュリティ上の理由から同じオリジンへのリクエストを通常許可しているため、ブロックしているのです。クロスドメインのリクエストを行う場合には、何か違うことをする必要があります。その方法についてのチュートリアルが Using CORS です。
postmanを使用している場合は、このポリシーによる制限を受けません。引用元:Cross-Origin XMLHttpRequest:
通常のWebページはXMLHttpRequestオブジェクトを使用して、リモートサーバーからデータを送受信することができますが、同じオリジンポリシーによって制限されています。しかし、拡張機能はそれほど制限されません。拡張機能は、最初にクロスオリジンのパーミッションを要求する限り、そのオリジンの外にあるリモートサーバーと対話することができます。
Ajaxを使ったクロスドメインの問題があります。www.を含まない同じ
http://`のパスでファイルにアクセスしていることを確認しなければなりません(または`http://www.`からアクセスして`www.`を含む同じパスに投稿していることもあります)。`www.`のパスでアクセスしている場合、ブラウザは別のドメインとみなしますので、どこに問題があるかわかります。あなたは別のドメインに投稿しているのに、ブラウザはオリジンの問題のためにフローをブロックしているのです。
API]1がリクエストしているホストと同じホストに置かれていない場合、フローがブロックされるので、APIと通信する別の方法を見つける必要があります。