跨域總結(jquery,php)

引子

項目緣由，先後端跨域了，第一次涉及到跨域的內容，踩了蠻多坑的，總結一下，避免下次再遇到~

1、圖片發送請求

由於圖片是不會去判斷是否跨域的，可是也只能發送get請求，而且獲取不到返回值，能夠用來監聽頁面訪問數量或者廣告點擊數量

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

2、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>

3、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 詳解