ajax 跨域 完全详解

基于前后端分离的项目是大势所趋，避免不了跨域
问什么会发生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跨域完全详解，如有问题还请多多留言，谢谢