基於前後端分離的項目是大勢所趨，避免不了跨域
問什麼會發生ajax跨域安全：【三個請求同時滿足纔可能發生跨域安全問題】
1.瀏覽器安全限制，請求正常發送並返回，瀏覽器處理對請求的校驗
解決方案： 要求瀏覽器禁止檢查，命令參數方式啓動瀏覽器 eg:chrome.exe --disable-web-security --user-data-dir=d:\temp3
2.跨域，請求發生的協議，域名，端口不一致
解決方案：JSONP請求方式；appending，動態創建script標籤方式請求，但是不滿足前後端開發需求,需要後臺改動,且只支持GET請求.
增加AbstractJsonpResponseBodyAdvice自定義類(使用方式自己另外百度)，
默認構造器裏增加super("callback")；callback默認前後臺約定，可以更改
請求url是callback=jQuery.....=_時間戳，請求返回的數據是jquery函數調用式,最後一個參數是防止請求被緩存了,若請求時候加cache:true則無此參數
返回的數據類型是application/javascript,而普通請求返回是application/json,動態創建動態銷燬,可通過debug模式查看腳本的創建和銷燬
3.XHR(XMLHttpRequest)請求方式，其他請求方式，瀏覽器不會做跨域限制
解決方案：
3.1被調用方(http協議增加響應頭字段：)
3.1.1服務器端實現：瀏覽器先執行後判斷？，跨域判斷方法，request請求頭中增加了Origin信息
增加Filter 自定義類配置url攔截規則，在dofilter方法裏增加response響應頭（FilterRegistrationBean）
Access-Control-Allow-Origin:request.getHeader("Origin") 一般都是request裏多了哪些請求頭就加哪些
* 不能滿足帶cookie的跨域
Access-Control-Allow-Credentials:true 允許cookie跨域請求
Access-Control-Allow-Methods:GET,POST,PUT等
Access-Control-Allow-Headers:Content-Type等 帶自定義頭請求,
自適應request.getHeader("Access-Control-Allow-Headers")
Access-Control-Max-Age:秒 瀏覽器預檢命令緩存時間
簡單請求：Content-Type爲以下三種：text/plain;multipart/form-data;application/x-www-form-urlencoded
非簡單請求：常見的有put,delete方法的ajax請求;
發送json格式,post方法用@RequestBody接受請求;
帶cookie的請求xhrFields:{ withCredentials:true }
document.cookie='cookie1=test' 加在被調用方的域名下
3.1.2NGIXN配置：
虛擬主機：多個域名指向同一個服務器,服務器根據不同域名把請求轉到不同服務器，實際只有一個主機
增加HOSTS域名：127.0.0.1 被調用方域名,多個eg:a.com
nginx/conf下新建vhost目錄，打開nginx.conf倒數最後大括號前增加include vhost/*.conf;載入自定義配置文件
vhost/a.conf新建內容:
server{
listen:80;
server_name a.com;
location /{
proxy_pass http://localhost:8080/; //所有請求都轉發到8080服務器
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
//預檢命令處理[if帶空格]
if ($request_method = OPTIONS){
return 200;
}
}
}
nginx.exe -t測試配置文件是否正確
start nginx.exe啓動
nginx.exe -s reload配置重新加載
nginx.exe -s stop 停止nginx
3.1.3APACHE配置
apache/conf/httpd.conf mod_vhost_alias.so模塊打開,httpd-vhosts.conf配置文件項打開
打開代理Proxy-140 mod_proxy.so打開 Proxy-149 mod_proxy_http.so打開
打開請求頭:mod_headers.so打開 mod_rewrite.so打開
apache/conf/extra/httpd-vhosts.conf虛擬主機配置文件
新增最後一節點,ServerName改成eg:a.com; ProxyPass / http://locahost:8080/ 其他日誌可以改下
啓動apache/bin/httpd.exe
3.1.4 Spring 增加@CrossOrigin註解
3.2調用方
隱藏跨域
反向代理 配置nginx
增加文件b.conf
server{
listen 80;
server_name b.com;
location /{
proxy_pass http://locahost:8081/;
}
//服務器代理地址
location /ajaxserver{
proxy_pass http://locahost:8080/test;
}
}
a.com域名下的/ajaxserver請求被代理到http://locahost:8080/test,而/被代理到8081正確的域名服務器下
Apache代理同nginx差不多
備註：參照慕課網ajax跨域完全詳解，如有問題還請多多留言，謝謝