一殖氏、為什么會(huì)發(fā)生AJAX跨域
1.瀏覽器限制
2.跨域
3.XHR（XMLHttpRequest）請(qǐng)求
二、產(chǎn)生的原因
1.瀏覽器 Request Headers Origin參數(shù) 與 Response Headers 參數(shù)的驗(yàn)證
三灸拍、跨域分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求
1.常見(jiàn)的簡(jiǎn)單請(qǐng)求 （先請(qǐng)求，后驗(yàn)證）
方法為：GET砾省、HEAD鸡岗、POST
請(qǐng)求頭：無(wú)自定義頭
Content-Type為以下幾種：
text/plain、multipart/form-data纯蛾、application/x-www-form-urlencoded
2.非簡(jiǎn)單請(qǐng)求 （先驗(yàn)證纤房，后請(qǐng)求）
put、delete方法的ajax請(qǐng)求
發(fā)送json格式的ajax請(qǐng)求
帶自定義頭的ajax請(qǐng)求
非簡(jiǎn)單請(qǐng)求會(huì)發(fā)送兩次數(shù)據(jù) 先發(fā)送預(yù)請(qǐng)求OPTIONS類型的驗(yàn)證翻诉，然后在發(fā)送真實(shí)請(qǐng)求
四炮姨、被調(diào)用方解決方案
1.服務(wù)器端實(shí)現(xiàn)
設(shè)置返回請(qǐng)求頭
//帶cookie的時(shí)候，必須域名全匹配碰煌，不可*代替
//通配的話舒岸，獲取http請(qǐng)求頭Origin參數(shù)在賦值給Access-Control-Allow-Origin
"Access-Control-Allow-Origin":"*"
"Access-Control-Allow-Origin":"http://a.com:8081"
//允許的請(qǐng)求方式
"Access-Control-Allow-Methods":"*"
//自定義請(qǐng)求頭Header參數(shù)
//通配的話，獲取http請(qǐng)求頭Access-Control-Request-Headers賦值給Access-Control-Allow-Headers
"Access-Control-Allow-Headers":"Content-Type"
//發(fā)送預(yù)請(qǐng)求緩存時(shí)間 期間只發(fā)送一次預(yù)請(qǐng)求可提高性能
"Access-Control-Max-Age":"3600"
//開(kāi)啟cookie跨域功能
"Access-Control-Max-Credentials":"true"
2.NGINX配置
nginx/conf/nginx.conf
加入 include vhost/*.conf //引入vhost下所用配置文件
nginx/vhost/a.com.conf
server{
listen 80;
server_name a.com;
location /{
proxy_pass http://localhost:8080/;
//無(wú)需變量
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Credentials true;
//nginx 獲取請(qǐng)求頭中的變量 在賦值給響應(yīng)頭
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_header;
//解決預(yù)請(qǐng)求 nginx if語(yǔ)句需留空格要不語(yǔ)法報(bào)錯(cuò)
if ($request_method = OPTIONS){
return 200;
}
}
}
3.APACHE配置
apache/conf/httpd.conf
開(kāi)啟 Include conf/extra/httpd-vhosts.conf
開(kāi)啟 LoadModule 模塊
mod_vhost_alias.so
mod_proxy.so
mod_proxy_http.so
mod_negotiation.so
mod_headers.so
mod_rewrite.so
*******************************
conf/extra/httpd-vhosts.conf
VirtualHost中加入
#把請(qǐng)求頭origin值返回到Access-Control-Allow-Orign字段
Header always set Access-Control-Allow-Origin "expr=%req:origin"
#把請(qǐng)求頭的Access-Control-Request-Headers值返回給Access-Control-Allow-Headers字段
Header always set Access-Control-Headers "expr=%{res:Access-Control=Request-Headers}"
Header always set Access-Control-Allows-Methods "*"
Header always set Access-Control-Allows-Credentials "true"
Header always set Access-Control-Max-Age "3600"
****************************
#處理預(yù)檢命令OPTIONS 直接返回204
RewriteEngine ON
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ "/" [R=204,L]
</VirtualHost>
4.調(diào)用方法解決跨域-隱藏跨域-方向代理 請(qǐng)求自己域名轉(zhuǎn)發(fā)請(qǐng)求
# nginx 域名/ -> 轉(zhuǎn)發(fā) 域名/ajaxserver -> 轉(zhuǎn)發(fā)
# nginx/conf/vhost/a.com
location /{
proxy_pass http://localhost:8080
}
location /ajaxserver{
proxy_pass http://localhost:8081
}
***************************
# apache 域名/ -> 轉(zhuǎn)發(fā) 域名/ajaxserver -> 轉(zhuǎn)發(fā)
# apache/conf/extra/httpd-vhosts.conf
ProxyPass /ajaxserver http://localhost:8081
ProxyPass / http://localhost:8080
