跨域總結(jquery,php)

sukies發表於2019-02-16
跨域jQueryPHP

引子

專案原因，前後端跨域了，第一次涉及到跨域的內容，踩了蠻多坑的，總結一下，避免下次再遇到~

一、圖片傳送請求

因為圖片是不會去判斷是否跨域的，但是也只能傳送get請求，並且獲取不到返回值，可以用來監聽頁面訪問數量或者廣告點選數量

var img=new Image();
img.src=`http://www.baidu.com`;
img.onerror=function(){
 alert(`error`);
}
img.onload=function(){
 alert(`success`);
}

二、jsonp

jsonp只能用於get請求，設定dataType：`jsonp`

使用 JSONP 形式呼叫函式時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。

$.ajax({
  url: "test.html",
  dataType：`jsonp`,
  success: function(html){
      //
  }
});

其實實現就下面的效果，如果直接這樣寫,就是頁面直接執行，請求成功後執行頁面的call函式

<script type="text/javascript" src=`http://www.aaa.com?callback=call`></script>

三、CORS，伺服器端設定

1.伺服器端設定允許請求的地址

 header( "Access-Control-Allow-Origin:*" );

2.設定可請求的方式

 header( "Access-Control-Allow-Methods:POST,GET" );

3.可以設定header頭部內容允許新增的頭部資訊

header(`Access-Control-Allow-Headers:value`);
  $.ajax({
            type: "GET",
            url: `#`,
            header:{//新增頭部資訊
                value:`123456`
            },
            crossDomain: true,
            success: function (data) {});

4.傳送cookie

需要注意的是，如果要傳送Cookie，Access-Control-Allow-Origin就不能設為星號，必須指定明確的、與請求網頁一致的域名

    response.setHeader("Access-Control-Allow-Credentials","true");
  $.ajax({
            type: "GET",
            url: `#`,
            crossDomain: true,
            xhrFields: {withCredentials: true},//傳送cookie
            success: function (data) {});

結束

參考：跨域資源共享 CORS 詳解

相關文章