クロスドメインでAjax通信をする
クロスドメインでapi通信を行う際、
Access-Control-Allow-Origin
などの許可が必要になり、これはapi側に実装します。
さらに、Cookieを扱いたい場合は、withCredentials
の設定も必要になり、api側で許可し、さらにクライアント側でも設定を送信しないとCookieを扱うことができません。
また、クロスドメインの場合、headerに'X-Requested-With' : 'XMLHttpRequest'
を入れて送信しなければ、api側でAjaxであることが伝わらないとのことだったので
headers: {'X-Requested-With': 'XMLHttpRequest'}
をajaxで送信しましたが、
Failed to load https://test.com/api/sendData: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://test.com' is therefore not allowed access. The response had HTTP status code 400.
というエラーが出るしAjax判定もされず…。
たぶん、withCredentials
の設定もしているからかなと思って同じところに設定を書いたらうまくいきました。
$(document).ready(function() {
var post_data = {};
$.ajax({
type : 'POST',
url : 'https://test.com/api/sendData',
data : {
'post_data' : post_data
},
xhrFields: {
withCredentials: true,
X-Requested-With : 'XMLHttpRequest'
},
// 通信成功時処理
success : function(result) {
},
// 通信失敗時処理
error : function(result) {
}
});
});
これで、送信の形式がOPTIONからPOSTになり、Ajaxで送信している判定もされた。