一、为什么会发生AJAX跨域
1.浏览器限制
2.跨域
3.XHR（XMLHttpRequest）请求
二、产生的原因
1.浏览器 Request Headers Origin参数 与 Response Headers 参数的验证
三、跨域分为简单请求和非简单请求
1.常见的简单请求 （先请求，后验证）
方法为：GET、HEAD、POST
请求头：无自定义头
Content-Type为以下几种：
text/plain、multipart/form-data、application/x-www-form-urlencoded
2.非简单请求 （先验证，后请求）
put、delete方法的ajax请求
发送json格式的ajax请求
带自定义头的ajax请求
非简单请求会发送两次数据 先发送预请求OPTIONS类型的验证，然后在发送真实请求
四、被调用方解决方案
1.服务器端实现
设置返回请求头
//带cookie的时候，必须域名全匹配，不可*代替
//通配的话，获取http请求头Origin参数在赋值给Access-Control-Allow-Origin
"Access-Control-Allow-Origin":"*"
"Access-Control-Allow-Origin":"http://a.com:8081"
//允许的请求方式
"Access-Control-Allow-Methods":"*"
//自定义请求头Header参数
//通配的话，获取http请求头Access-Control-Request-Headers赋值给Access-Control-Allow-Headers
"Access-Control-Allow-Headers":"Content-Type"
//发送预请求缓存时间 期间只发送一次预请求可提高性能
"Access-Control-Max-Age":"3600"
//开启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/;
//无需变量
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Credentials true;
//nginx 获取请求头中的变量 在赋值给响应头
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_header;
//解决预请求 nginx if语句需留空格要不语法报错
if ($request_method = OPTIONS){
return 200;
}
}
}
3.APACHE配置
apache/conf/httpd.conf
开启 Include conf/extra/httpd-vhosts.conf
开启 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中加入
#把请求头origin值返回到Access-Control-Allow-Orign字段
Header always set Access-Control-Allow-Origin "expr=%req:origin"
#把请求头的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"
****************************
#处理预检命令OPTIONS 直接返回204
RewriteEngine ON
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ "/" [R=204,L]
</VirtualHost>
4.调用方法解决跨域-隐藏跨域-方向代理 请求自己域名转发请求
# nginx 域名/ -> 转发 域名/ajaxserver -> 转发
# nginx/conf/vhost/a.com
location /{
proxy_pass http://localhost:8080
}
location /ajaxserver{
proxy_pass http://localhost:8081
}
***************************
# apache 域名/ -> 转发 域名/ajaxserver -> 转发
# apache/conf/extra/httpd-vhosts.conf
ProxyPass /ajaxserver http://localhost:8081
ProxyPass / http://localhost:8080
