ajax跨域问题解决方案以及详解

转自：https://www.imooc.com/learn/947

一、解决方案

    先把解决办法放在前面：

1.   Jsonp + 修改后台响应

a)    Jsonp:”calback2”-> super(“calback2”)

2.   被调用方  Filter（ client <-> tomcat ）

3.   带自定义头的请求

4.   被调用方Nginx（ client <->nginx <-> tomcat ）

a)    Windows/host    127.0.0.1 b.com（虚拟主机）

b)    Nginx/conf/  新建文件夹vhost ，修改nginx.conf，新增b.com.conf

 

5.   被调用方Apache

a)    修改Apache/conf/httpd.conf      vhost proxy headers rewrite

b)    修改apache/Conf/extra/httpd-ssl.conf，末尾添加

6.   Spring框架解决方案，增加注解@CrossOrigin

7.   调用方解决-隐藏跨域（反向代理）调用方nginx

a)    Windows/host    127.0.0.1 b.com a.com（调用方虚拟主机）

b)    Nginx/conf/  新建文件夹vhost ，修改nginx.conf，新增a.com.conf

8.   调用方解决-隐藏跨域（反向代理）调用方apache

二、详解

发生跨域，是由三个因素导致的：浏览器机制，xmlHttpRequest，跨域。所以解决办法从这三个入口来解决

1.   Jsonp：

a)    普通ajax请求发送的是type为xhr的包，而jsonp发送的是type=script。

b)  Jsonp原理是动态创建一个script脚本。所以只能接受GET请求

2.   Filter: (client直接与tomcat交互数据)

a)    * 不能解决带cookie的请求

3.   略

Apache/Nginx：http服务器，做反向代理/负载均衡和处理静态资源（script、img）

Tomcat：应用服务器，处理用户数据（静态服务器不是必要阶段，可以将请求直接发给应用服务器）

Json格式的ajax请求->Options预检命令，请求时先检测是否能请求到

4.   被调用方Nginx

让请求在到被调用方，先访问被调用方的http服务器，在其中对xhr请求的包头做处理

5.  被调用方Apache

6.   略

7.   调用方nginx

a)    调用的地址是本地的，所以前缀是相对地址。让浏览器不认为是跨域

现在：之前:

8.    调用方apache