ajax 跨域问题

本博客总结来自晓风清老师课程讲解：

                            https://www.imooc.com/learn/947

    欢迎大家对我写的博客进行吐槽。

三种跨域问题：

1.浏览器限制访问。

2.跨域

3.xmlhttprequest（xhr）请求

解决办法：

1.浏览器禁止检查（ACAO）：

打开window命令窗口： 输入chrome.exe的路径我的是 D:\chrome\Chrome\Application\chrome.exe

然后加入--disabled-web-security --user-data-dir=g:\temp3

2.jsonp跨域请求

将ajax中的dataType类型改成jsonp，在后台中创建一个类并继承AbstractJsonpResponseBodyAdvice加上@ControllerAdvice注解，然后重写构造方法，构造方法继承super("callback");

请求链接为xxx？callback=''&_='',后面参数的作用是为了防止缓存的出现，如果在ajax的调用参数中加上，cache:true，第二个参数就不会出现。

jsonp的弊端：

    1.服务器需要改动代码支持。

    2.只支持get请求。

    3.发送的不是xhr请求。

3.解决跨域的两种方法：

⑴被调用方解决跨域

    a、服务器端实现

    添加filter

      给filter添加两个response返回的消息头

        reresponse.addHeader("Access-Controle-Allow-Origin","http://localhost:8081")（跨域的地址）

        //当有多个域名时，第二个位置用*

        reresponse.addHeader("Access-Controle-Allow-Method","GET")，

        //当有多个方法时候第二个位置用*

    

   当方法为options时候，这时候是预检命令，我们要第二次发送非options的方法，Filter中添加

         reresponse.addHeader("Access-Controle-Allow-Headers","Content-Type")；

    options预检命令缓存，在一个小时内能够缓存我们的信息，只需要发送一次post命令，options预检命令在一个小时内，不用发送了

          reresponse.addHeader("Access-Controle-Allow-Age","3600")；

    带cookie的跨域（发送的cookie是被调用方的cookie）

        ajax中添加参数：xhrFields:{withCredentials:true}，Filter里面的ACAO要明确域名（或者req.getHeader("Origin")获取问的域名，将value其更改），不能用*

         reresponse.addHeader("Access-Controle-Allow-Credentials","true")；

    带自定义头的跨域

        ajax中添加参数：headers:{"x-header1":"AAA"}/

                        beforeSend:function(xhr){xhr.sendRequestHeader("x-header2","BBB")}

        获取自定义跨域：

       req.getHeader("Access-Controle-Allow-Headers");//获取所有跨域头

    b、nginx配置（由于没有使用过nginx和apache，所以这里就不细致讲解，大家如果想学，可以上我下面留的网址学习。）

        以下是nginx的配置，在vhost文件夹下

        

        这一章具体讲解在

c、apache配置

        

        

        具体去该网址学习：

        https://www.imooc.com/video/16592

d、Spring框架解决

    添加@CrossOrighin注解，就能解决跨域问题

⑵调用方解决跨域

   隐藏跨域

   a、 nginx反向代理配置信息：

    

    https://www.imooc.com/video/16594

    b、apache反向代理配置

    

    https://www.imooc.com/video/16595