如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Web項目前后端分離開發時，經常會遇到跨域請求和跨域攜帶Cookie的相關問題：
跨域請求
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
getResponse().setHeader("Access-Control-Allow-Origin","*");
//表明服務器支持的所有頭信息字段
getResponse().setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma,Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
/** 目前測試來看為了兼容所有請求方式，上面2個必須設 **/
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
getResponse().setHeader("Access-Control-Allow-Credentials", "true");
// 首部字段 Access-Control-Allow-Methods 表明服務器允許客戶端使用 POST, GET 和 OPTIONS 方法發起請求。
//該字段與 HTTP/1.1 Allow: response header 類似，但僅限于在需要訪問控制的場景中使用。
getResponse().setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//表明該響應的有效時間為 86400 秒，也就是 24 小時。在有效時間內，瀏覽器無須為同一請求再次發起預檢請求。
//請注意，瀏覽器自身維護了一個最大有效時間，如果該首部字段的值超過了最大有效時間，將不會生效。
getResponse().setHeader("Access-Control-Max-Age", "86400");
// IE8 引入XDomainRequest跨站數據獲取功能,也就是說為了兼容IE
getResponse().setHeader("XDomainRequestAllowed","1");
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
跨域請求攜帶Cookie
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
response.setHeader("Access-Control-Allow-Credentials", "true");
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
//表明服務器支持的頭信息字段
response.setHeader("Access-Control-Allow-Headers","content-type");
前端根據實際情況修改發起請求的ajax，示例：
$.ajax({
type: "POST",
url: "實際的請求地址",
data: {參數：參數值},
dataType: "json",
crossDomain:true, xhrFields: {
withCredentials: true },
success: function(data){ alert("請求成功");
}
});
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
另外還有代理、jsonp等方式不做介紹了
