Ajax跨域请求笔记

一、什么是跨域

               js在不同的域之间进行数据传输或者通信的时候，就被称为跨域。 浏览器中js获取服务端的数据的时候，只要协议，域名，端口任何一个不                   同，就被当作不同的域名。

          跨域问题：浏览器的限制导致的跨域问题。

二、区别不同的域

          a、协议

          b、域名

          c、端口

          只要三者有一个不同就是不同的域。

三、浏览器如何监制ajax跨域问题的

              a、主要是通过请求方式 是不是xhr  （xmlhttprequest） 方式请求来进行检测的。

五、浏览器请求是先执行后判断 还是先判断都执行

               简单请求：先执行，后判断

                    简单请求满足几个条件：

                         a、方法为get,head,post

                         b、请求header里面 

                                   无自定义头

                                   content-type 为

                                             text/plain

                                             multipart/form-data

                                             application/x-www-form-urlencoded

                    

               非简单请求：先判断，后执行

                       非简单请求：

                              put,delete方法的ajax请求 

                              发送json格式的ajax请求

                              带定义头的ajax请求

四、解决方案

          a、jsonp请求    

               因为发送的请求类型是script类型所以不被浏览器限制。

               弊端：

                    1、 服务端需要添加代码

                    2、只能是get方法请求,不能进行较为复杂的post请求或者其他请求

                    3、不是xhr形式的，缺少事件监听之类

               解决方法：

                    1、ajax请求方式使用jsonp

                    2、服务端返回参数需要加上callback，可以修改

          b、服务端解决

                    b.1、被调用方解决-支持跨域

                              1.服务端实现

                                   编写一个过滤器    http: *可以允许所有的域 

1.1、带cookie的跨域

                   解决实例：

                         1、在ajax请求添加带cookie的限制。

                         2、在后台请求中添加cookie接受

                         3、浏览器中添加cookie。

                         4、access-controller  设置成全匹配，*不行。可以将浏览器的域名接受到然后返回回去。

                         5、设置成 true，参见图。          

 1.2、带自定义头的跨域

                    解决实例：

                         1、ajax方法通过添加head属性 进行自定义头，也可以通过方法进行添加自定义头。

                         2、后台通过requestHeader进行接受，看图

                         3、设置表头图

     

                              2.nginx配置

                                    实现步骤：

                                        1、在主机中寻找到hosts文件 进行添加域名隐射  127.0.0.1 b.com

                                        2、在nginx安装目录下新建文件夹vhost

                                        3.编写ngin.conf文件 注意红框部分表示 讲vhost里面的配置文件加载进来

                                        

                                        4.在vhost文件夹新建b.com.conf配置文件

                                             简单讲述：listen 监听所有80端口的请求，隐射到location proxy_pass路径中。也就是所有的80的请求转发到                                                                           localhost中

                                        5.启动nginx命令：该命令都是在windows下完成的

                                             a/nginx.exe -t   查看 nginx配置文件 测试配制文件

                                             b/start nginx.exe 启动nginx

                                             c/nignx.exe -s reload 重新启动nginx。

                                        6.配制文件改动

                                              简单概述：

                                                  6.1添加允许跨域的几个参数，nginx中所有大写必须改成小写，-改成_  中划线改成下划线。

                                                  6.2多了一个判断，主要是用来对于预检查命令直接返回200.

                                                  6.3$http_origin 这些个参数是nginx用来获取请求数据的。

                                             

                                        7.设置完重启下nginx，实例完成。后台不需要再次编写代码来进行跨域。访问http:b.com/test

                                            

                              3.apache配置

                      待续。。。

             4.spring框架的跨域解决

                    添加CrossOrigin注解就OK。可以注解到类，也可以注解到方法。

b.2调用方解决

                         

                          

            

json格式的请求

后端接受的时候 需要用到requestjsonbody

max-age 表示在多长时间之内不用发送预检查命令   options命令是被缓存了

ajax请求自带cookie的写法

在浏览器中添加cookie

‘

带cookie的写法，’

添加自定义头。

需要修改addHeader参数。