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

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

一、解决方案

    先把解决办法放在前面:

1.   Jsonp + 修改后台响应

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

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

2.   被调用方  Filter( client <-> tomcat )

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

3.   带自定义头的请求

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

4.   被调用方Nginx( client <->nginx <-> tomcat )

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

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

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

5.   被调用方Apache

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、详解

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

1.   Jsonp:

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

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

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

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

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

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

3.   略

Apache/Nginx:http服务器,做反向代理/负载均衡和处理静态资源(script、img)

Tomcat:应用服务器,处理用户数据(静态服务器不是必要阶段,可以将请求直接发给应用服务器)

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

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

4.   被调用方Nginx

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

5.  被调用方Apache
6.   略
7.   调用方nginx

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

现在:ajax跨域问题解决方案以及详解之前:ajax跨域问题解决方案以及详解

8.    调用方apache