【JS】AJAX跨域-被调用方与调用方解决方案（二）

解决跨域问题

解决方案三（被调用方支持跨域-服务端代码解决）

　　被调用方解决，基于支持跨域的解决思路，基于Http协议关于跨域的相关规定，在响应头里增加指定的字段告诉浏览器，允许调用

　　跨域请求是直接从浏览器发送到被调用方，被调用方在响应头里增加相关信息，返回到页面，页面能正常获取请求内容。

　　1、服务端增加一个过滤器（CrossFilter.java），过滤所有请求，在请求响应中增加内容，如下：

 package com.test.ajax.cross.filter;

 import java.io.IOException;

 import javax.servlet.Filter;

 import javax.servlet.FilterChain;

 import javax.servlet.FilterConfig;

 import javax.servlet.ServletException;

 import javax.servlet.ServletRequest;

 import javax.servlet.ServletResponse;

 import javax.servlet.http.Cookie;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import org.springframework.util.StringUtils;

 /**

  * 服务端解决跨域

  * @author h__d

  *

  */

 public class CrossFilter implements Filter {

     @Override

     public void init(FilterConfig filterConfig) throws ServletException {

         // TODO Auto-generated method stub

     }

     @Override

     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

             throws IOException, ServletException {

         HttpServletResponse res = (HttpServletResponse) response;

         HttpServletRequest req = (HttpServletRequest) request;

         // 允许所有域，但不能满足带 cookie 的跨域请求

         res.addHeader("Access-Control-Allow-Origin","*");

         // 允许所有header

         res.addHeader("Access-Control-Allow-Headers","*");

         // 允许所有方法

         res.addHeader("Access-Control-Allow-Methods", "*");

         // 允许浏览器在一个小时内，缓存跨域访问信息（即上面三个信息）

         res.addHeader("Access-Control-Max-Age", "3600");

         chain.doFilter(request, response);

     }

     @Override

     public void destroy() {

         // TODO Auto-generated method stub

     }

 }

　　2、在web.xml文件中注册过滤器

<filter>

    <filter-name>CrossFilter</filter-name>

    <filter-class>com.test.ajax.cross.filter.CrossFilter</filter-class>

</filter>

<filter-mapping>

    <filter-name>CrossFilter</filter-name>

    <url-pattern>/*</url-pattern>

</filter-mapping>

　　3、编辑测试界面，test3.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script src="jquery-1.11.3.min.js" type="text/javascript"></script>

 </head>

 <body>

     <h2>测试服务端解决跨域问题</h2>

     <a href="#" onclick="get()">发送get请求</a>

 </body>

 <script type="text/javascript">

     function get(){

         $.getJSON("http://localhost:8080/test-ajax-cross/test/get").then(function(result){

             console.log(result);

             $("body").append("<br>" + JSON.stringify(result));

         });

     }

 </script>

 </html>

　　4、在浏览器中输入地址进行访问，http://a.com:8080/test-ajax-cross/static/test3.html

　　　　【JS】AJAX跨域-被调用方与调用方解决方案（二）

　　　　其他请求

　　　　　　简单请求与非简单请求

- - 简单请求：浏览器先发送真正的请求后检查
  - 请求方法：GET、HEAD、POST的一种
  - 请求header：无自定义header；Content-Type为：text/plain、multipart/form-data、application/x-www-form-urlencoded的一种
  - 非简单请求：浏览器先发预检命令，检查通过后，才发送真正的请求
  - 常见的有：PUT、DELETE
  - 其它条件：发送Json格式的请求、带自定义header的请求
  - 预检命令：浏览器检测到跨域请求, 会自动发出一个OPTIONS请求, 就是所谓的预检（preflight）请求。当预检请求通过的时候，才发送真正的请求。

　　　　A、带cookie的ajax请求，跨域问题

　　　　　　1、编辑test3.html页面，增加一个带cookie的ajax请求

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script src="jquery-1.11.3.min.js" type="text/javascript"></script>

 </head>

 <body>

     <h2>测试服务端解决跨域问题</h2>

     <a href="#" onclick="get()">发送get请求</a>

     <a href="#" onclick="getCookie()">发送getCookie请求</a>

 </body>

 <script type="text/javascript">

     function get(){

         $.getJSON("http://localhost:8080/test-ajax-cross/test/get").then(function(result){

             console.log(result);

             $("body").append("<br>" + JSON.stringify(result));

         });

     }

     // 测试带上cookie的请求能否跨域

     function getCookie(){

         $.ajax({

             url: "http://localhost:8080/test-ajax-cross/test/getCookie",

             xhrFields:{

                 // 带上证书，发送 AJAX 请求时带上 cookie

                 withCredentials:true

             },

             // 允许跨域

             crossDomain: true,

             success:function(result){

                 console.log(result);

                 $("body").append("<br>" + JSON.stringify(result));

             }

         });

     }

 </script>

 </html>

　　　　　　2、增加接受请求的方法

 @RequestMapping(value = "/getCookie", method = RequestMethod.GET)

 @ResponseBody

 public Map getCookie(@CookieValue(value = "cookie1") String cookie1) {

     System.out.println("TestController getCookie()");

     Map<String, Object> map = new HashMap();

     map.put("data", "getCookie" + cookie1);

     return map;

 }

　　　　　　3、编辑过滤器，支持带cookie的ajax请求

 package com.test.ajax.cross.filter;

 import java.io.IOException;

 import javax.servlet.Filter;

 import javax.servlet.FilterChain;

 import javax.servlet.FilterConfig;

 import javax.servlet.ServletException;

 import javax.servlet.ServletRequest;

 import javax.servlet.ServletResponse;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import org.springframework.http.HttpStatus;

 import org.springframework.util.StringUtils;

 import org.springframework.web.bind.annotation.RequestMethod;

 /**

  * 服务端解决跨域

  *

  * @author h__d

  *

  */

 public class CrossFilter implements Filter {

     @Override

     public void init(FilterConfig filterConfig) throws ServletException {

         // TODO Auto-generated method stub

     }

     @Override

     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

             throws IOException, ServletException {

         HttpServletResponse res = (HttpServletResponse) response;

         HttpServletRequest req = (HttpServletRequest) request;

         // 支持所有域

         String origin = req.getHeader("Origin");

         if (!StringUtils.isEmpty(origin)) {

             // 支持任何域名的跨域调用 且 支持带cookie（是被调用方域名的cookie，而不是调用方的cookie）

             res.addHeader("Access-Control-Allow-Origin", origin);

         }

         // 指定允许的域，带cookie时，origin必须是全匹配，不能使用 *

         // res.addHeader("Access-Control-Allow-Origin","http://localhost:8081");

         // 允许所有域，但不能满足带 cookie 的跨域请求

         // res.addHeader("Access-Control-Allow-Origin","*");

         // 支持所有header

         res.addHeader("Access-Control-Allow-Headers","*");

         // 指定允许的方法

 //      res.addHeader("Access-Control-Allow-Methods","GET");

         // 允许所有方法

         res.addHeader("Access-Control-Allow-Methods", "*");

         // 允许浏览器在一个小时内，缓存跨域访问信息（即上面三个信息）

         res.addHeader("Access-Control-Max-Age", "3600");

         // 允许证书，启用 cookie

         res.addHeader("Access-Control-Allow-Credentials", "true");

         chain.doFilter(request, response);

     }

     @Override

     public void destroy() {

         // TODO Auto-generated method stub

     }

 }

　　　　　　4、在localhost下，增加一个cookie，方法是：浏览器打开localhost:8080，按F12打开控制台，输入：document.cookie="cookie1=test"

　　　　　　　　【JS】AJAX跨域-被调用方与调用方解决方案（二）

　　　　　　5、浏览器访问http://a.com:8080/test-ajax-cross/static/test3.html#，点击发送getCookie请求，可以看到控制台报错

　　　　　　　　【JS】AJAX跨域-被调用方与调用方解决方案（二）

　　　　　　6、解决，响应是"Access-Control-Allow-Origin",不能用"*"，通配符代替。在请求头中我们可以看到有Origin字段，后端服务可以获取这个字段的值，然后设置未允许

　　　　　　　　【JS】AJAX跨域-被调用方与调用方解决方案（二）

　　　　　　　　编辑后端过滤器

　　　　　　7、浏览器访问http://a.com:8080/test-ajax-cross/static/test3.html#，点击发送getCookie请求，可以看到已经能正常返回

　　　　B、带自定义头的ajax请求，跨域问题

　　　　　　1、编辑test3.html页面，增加一个带自定义头的ajax请求

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script src="jquery-1.11.3.min.js" type="text/javascript"></script>

 </head>

 <body>

     <h2>测试服务端解决跨域问题</h2>

     <a href="#" onclick="get()">发送get请求</a>

     <a href="#" onclick="getCookie()">发送getCookie请求</a>

     <a href="#" onclick="getHeader()">发送getHeader请求</a>

 </body>

 <script type="text/javascript">

     function get(){

         $.getJSON("http://localhost:8080/test-ajax-cross/test/get").then(function(result){

             console.log(result);

             $("body").append("<br>" + JSON.stringify(result));

         });

     }

     // 测试带上cookie的请求能否跨域

     function getCookie(){

         $.ajax({

             url: "http://localhost:8080/test-ajax-cross/test/getCookie",

             xhrFields:{

                 // 带上证书，发送 AJAX 请求时带上 cookie

                 withCredentials:true

             },

             // 允许跨域

             crossDomain: true,

             success:function(result){

                 console.log(result);

                 $("body").append("<br>" + JSON.stringify(result));

             }

         });

     }

     // 测试带上不同header的请求能否跨域

     function getHeader(){

         $.ajax({

             url: "http://localhost:8080/test-ajax-cross/test/getHeader",

             headers:{

                 "x-header1":"AAA"

             },

             beforeSend:function(xhr){

                xhr.setRequestHeader("x-header2","BBB")

             },

             success:function(result){

                 console.log(result);

                 $("body").append("<br>" + JSON.stringify(result));

             }

         });

     }

 </script>

 </html>

　　　　　　2、增加自定义头的ajax请求，接受请求的方法

 @RequestMapping(value = "/getHeader", method = RequestMethod.GET)

 @ResponseBody

 public Map getHeader(

         @RequestHeader("x-header1") String header1,

         @RequestHeader("x-header2") String header2) {

     System.out.println("TestController getHeader()");

     Map<String, Object> map = new HashMap();

     map.put("data", "getHeader" + header1+header2);

     return map;

 }

　　　　　　3、浏览器访问http://a.com:8080/test-ajax-cross/static/test3.html#，点击发送getHeader请求，可以看到已经能正常返回

　　　　　　　　打开F12，查看Network中，发现浏览器做了2次请求，第一是请求method是options，就是所谓的预检（preflight）请求，才发送真正的请求。且第一次OPTIONS请求，headers是不会带到后端服务器上来

　　　　　　　　【JS】AJAX跨域-被调用方与调用方解决方案（二）

　　　　附：完整版过滤器

 package com.test.ajax.cross.filter;

 import java.io.IOException;

 import javax.servlet.Filter;

 import javax.servlet.FilterChain;

 import javax.servlet.FilterConfig;

 import javax.servlet.ServletException;

 import javax.servlet.ServletRequest;

 import javax.servlet.ServletResponse;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import org.springframework.http.HttpStatus;

 import org.springframework.util.StringUtils;

 import org.springframework.web.bind.annotation.RequestMethod;

 /**

  * 服务端解决跨域

  *

  * @author h__d

  *

  */

 public class CrossFilter implements Filter {

     @Override

     public void init(FilterConfig filterConfig) throws ServletException {

         // TODO Auto-generated method stub

     }

     @Override

     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

             throws IOException, ServletException {

         HttpServletResponse res = (HttpServletResponse) response;

         HttpServletRequest req = (HttpServletRequest) request;

         // 支持所有域

         String origin = req.getHeader("Origin");

         if (!StringUtils.isEmpty(origin)) {

             // 支持任何域名的跨域调用 且 支持带cookie（是被调用方域名的cookie，而不是调用方的cookie）

             res.addHeader("Access-Control-Allow-Origin", origin);

         }

         // 指定允许的域，带cookie时，origin必须是全匹配，不能使用 *

         // res.addHeader("Access-Control-Allow-Origin","http://localhost:8081");

         // 允许所有域，但不能满足带 cookie 的跨域请求

         // res.addHeader("Access-Control-Allow-Origin","*");

         // 允许所有header，但是第一次OPTIONS请求，headers是不会带过来的

 //        String headers = req.getHeader("Access-Control-Allow-Headers");

 //        if (!StringUtils.isEmpty(headers)) {

 //            // 允许所有header，自定义头访问出现问题

 //            res.addHeader("Access-Control-Allow-Headers", headers);

 //        }

         // 支持所有header

         res.addHeader("Access-Control-Allow-Headers","*");

         // 指定允许的方法

 //      res.addHeader("Access-Control-Allow-Methods","GET");

         // 允许所有方法

         res.addHeader("Access-Control-Allow-Methods", "*");

         // 允许浏览器在一个小时内，缓存跨域访问信息（即上面三个信息）

         res.addHeader("Access-Control-Max-Age", "3600");

         // 允许证书，启用 cookie

         res.addHeader("Access-Control-Allow-Credentials", "true");

         // 第一次OPTIONS请求，headers是不会带过来的

         if (req.getMethod().equals(RequestMethod.OPTIONS.name())) {

             res.setStatus(HttpStatus.OK.value());

         }

         chain.doFilter(request, response);

     }

     @Override

     public void destroy() {

         // TODO Auto-generated method stub

     }

 }

解决方案三（被调用方支持跨域-Spring框架解决）

　　Spring Framework 4.2 GA为CORS提供了第一类支持。所以springMVC的版本要在4.2或以上版本才支持@CrossOrigin，@CrossOrigin可以用在类上和方法上

　　@CrossOrigin的作用就相当于上例中的CrossFilter.class

 @Controller

 @RequestMapping("/test")

 @CrossOrigin

 public class TestController {

     ...

 }

解决方案三（被调用方支持跨域-代理方案解决）

　　在很多项目的架构中，都是使用了代理的机制，浏览器访问nginx，nginx访问tomcat服务，如下图：

　　　　【JS】AJAX跨域-被调用方与调用方解决方案（二）

　　那么在上例中可以想到，跨域请求是直接从浏览器发送到被调用方，被调用方在响应头里增加相关信息，可以在tomcat应用服务程序中加，也可以在nginx/apache等代理中加

　　相当于nginx/apache做了过滤器的功能

　　流程：

　　1、修改页面访问地址，统一请求到http://b.com/test-ajax-cross，让请求经过代理服务器nginx/apache

　　2、修改代理服务器nginx/apache配置。

　　Nginx配置如下：

 server{

     listen 80;

     server_name b.com;                                                                                               

     location /{

         proxy_pass http://localhost:8080/;                                                                           

         add_header Access-Control-Allow-Methods *;

         add_header Access-Control-Max-Age 3600;

         add_header Access-Control-Allow-Credentials true;                                                            

         add_header Access-Control-Allow-Origin $http_origin;

         add_header Access-Control-Allow-Headers *;                                                                   

         # 预检请求，直接返回正确

         if ($request_method = OPTIONS){

             return 200;

         }

     }

 }

　　Apache配置

修改conf/httpd.conf找到LoadModule vhost_alias_module module/mod_vhost_alias.so取消注释
修改conf/httpd.conf找到LoadModule proxy_module module/mod_ proxy.so取消注释
修改conf/httpd.conf找到LoadModule proxy_http_module module/mod_ proxy_http.so取消注释
修改conf/httpd.conf找到LoadModule headers_module module/mod_ headers.so取消注释
修改conf/httpd.conf找到LoadModule rewrite_module module/mod_ rewrite.so取消注释
修改conf/httpd.conf找到Include conf/extra/httpd-vhosts.conf取消注释
修改conf/extra/httpd-vhosts.conf在最后面增加下面的内容即可

<VirtualHost *:80>

    ServerName b.com

    ErrorLog "logs/b.com-error.log"

    CustomLog "logs/b.com-access.log" common

    ProxyPass / http://localhost:8080/

    # 把请求头的origin值返回到Access-Control-Allow-Origin字段

    Header always set Access-Control-Allow-Origin "expr=%{req:origin}"

    Header always Access-Control-Allow-Headers "*"

    Header always set Access-Control-Allow-Methods "*";

    Header always set Access-Control-Max-Age "3600";

    Header always set Access-Control-Allow-Credentials ""true";

    # 处理预检命令OPTIONS，直接返回204

    RewriteEngine On

    RewriteCond %{REQUEST_METHOD}OPTIONS

    RewriteRule ^(.*)$"/" [R=204,L]

</VirtualHost>

解决方案四（被调用方支持跨域）

　　使用nginx进行反向代理，结构如下

　　【JS】AJAX跨域-被调用方与调用方解决方案（二）

　　当页面要进行跨域请求是，可以由nginx对url进行过滤，跨域的url请求，转发到其他服务器上，进行处理，前端无感知

　　nginx配置如下：

 server{

     listen 80;

     server_name a.com;

     location /{

         proxy_pass http://127.0.0.1:8080/;

     }

     location /test-ajax-cross/test{
           # 也可以转发到其他域名，进行跨域请求

         proxy_pass http://localhost:8080/test-ajax-cross/test;

     }

 }

　　1、编辑一个页面test4.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script src="jquery-1.11.3.min.js" type="text/javascript"></script>

 </head>

 <body>

     <h2>测试服务端解决跨域问题</h2>

     <a href="#" onclick="get()">发送get请求</a>

     <a href="#" onclick="getCookie()">发送getCookie请求</a>

     <a href="#" onclick="getHeader()">发送getHeader请求</a>

 </body>

 <script type="text/javascript">

     function get(){

         $.getJSON("http://a.com/test-ajax-cross/test/get").then(function(result){

             console.log(result);

             $("body").append("<br>" + JSON.stringify(result));

         });

     }

     // 测试带上cookie的请求能否跨域

     function getCookie(){

         $.ajax({

             url: "http://a.com/test-ajax-cross/test/getCookie",

             xhrFields:{

                 // 带上证书，发送 AJAX 请求时带上 cookie

                 withCredentials:true

             },

             // 允许跨域

             crossDomain: true,

             success:function(result){

                 console.log(result);

                 $("body").append("<br>" + JSON.stringify(result));

             }

         });

     }

     // 测试带上不同header的请求能否跨域

     function getHeader(){

         $.ajax({

             url: "http://a.com/test-ajax-cross/test/getHeader",

             headers:{

                 "x-header1":"AAA"

             },

             beforeSend:function(xhr){

                xhr.setRequestHeader("x-header2","BBB")

             },

             success:function(result){

                 console.log(result);

                 $("body").append("<br>" + JSON.stringify(result));

             }

         });

     }

 </script>

 </html>

　　2、配置nginx做反向代理

　　3、使用地址 http://a.com/test-ajax-cross/static/test4.html#，进行访问，测试是能正常访问的

　　Apache反向代理实现

　　配置如下：

 <VirtualHost *:80>

     ServerName a.com

     ErrorLog "logs/a.com-error.log"

     CustomLog "logs/a.com-access.log" common

     ProxyPass / http://127.0.0.1:8080/

     ProxyPass /ajaxserverapache http://localhost:8080/test-ajax-cross/test

 </VirtualHost>

秒客网

【JS】AJAX跨域-被调用方与调用方解决方案（二）

解决跨域问题

解决方案三（被调用方支持跨域-服务端代码解决）

其他请求

A、带cookie的ajax请求，跨域问题

B、带自定义头的ajax请求，跨域问题

解决方案三（被调用方支持跨域-Spring框架解决）

解决方案三（被调用方支持跨域-代理方案解决）

Nginx配置如下：

Apache配置

解决方案四（被调用方支持跨域）

nginx配置如下：

Apache反向代理实现

相关文章