Jqueryで「Access-Control-Allow-Origin’ header is present on the requested resource」と表示される場合の対処法
2019.11.25
2019.11.25
質問内容
Jqueryのajaxでリクエストを行うと、次のエラーが表示されます。
XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
下記リクエストコードです:
$.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); });
ベストアンサー
あなたはあなたのページが存在しているのとは異なるドメインに対してXMLHttpRequestをしていることになります。そのため、通常はセキュリティ上の理由から同じ発信元でリクエストを許可するため、ブラウザはそれをブロックしています。クロスドメインリクエストを行う場合は、別のことを行う必要があります。それを達成する方法についてのチュートリアルはCORSの使用です。
通常のWebページは、XMLHttpRequestオブジェクトを使用してリモートサーバーとデータを送受信できますが、同じオリジンポリシーによって制限されます。拡張機能はそれほど制限されていません。拡張機能は、最初にクロスオリジンパーミッションを要求する限り、オリジンの外部のリモートサーバーと通信できます。
原文