AJAX跨域产生原因及解决方法

什么是跨域：

        跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等 

AJAX产生跨域原因:(3个问题同时满足 才可能产生跨域问题)

浏览器限制

跨域(协议,主机名,端口号中有一个不同就产生跨域)

XHR(XMLHttpRequest)请求

浏览器会先执行还是先判断跨域？

        简单请求会先执行在判断，非简单请求先判断再执行

解决方法 ：对浏览器限制修改不常用，主要解决跨域方式达到解决跨域问题

所以一般还是以XHR请求方式请求，主要解决跨域问题，两种方式

一--被调用方解决（在相应请头部增加字段，告诉浏览器支持跨域访问）

        服务器端实现

                Filter解决方案，如下图:

                        

        NGINX配置

                实际工作中多以此方法解决ajax跨域问题,新建自己的nginx配置文件 在nginx.conf结尾添加如下语句

自己的配置文件中添加如下配置(红框中重点）

        APACHE配置

二--调用方解决（隐藏跨域）nginx 处理方式

    1.配置反向代理

2.ajax请求url填写虚拟主机反向代理服务器的名字

改变XHR请求方式的跨域解决方法(不推荐)

         JSONP---客户端ajax请求加上 dataType : "jsonp",

就不会是XHR请求，而是script请求,后台创建类继承AbstractJsonpResponseBodyAdvice,类上加上@ControllerAdvice注解  重写构造函数 如下

普通js请求返回类型是json而，jsonp返回的是js代码(函数调用形式：函数名是callback参数值，函数参数是原来要返回的值)，jsonp约定的参数名是callback，也可以自定义,格式为: jsonp:'callback2',此时后台构造函数super里写callback2即可,这种方式也有一些弊端

        JSONP弊端

                服务器需要改动代码支持-(自己的项目还好，如果是调用别人的接口,别人没有设置jsonp访问形式的话就不行了)

                只支持GET方式请求(因为要返回js代码)

                请求不是XHR(没有异步刷新功能)