Spring Boot先后端分离后，跨域问题怎么解决？

时间  2020-12-27
标签 javascript css html 前端 java jquery nginx web ajax spring 栏目 Spring 繁體版
原文   原文链接

如今基于spring boot先后端分离的开发模式愈来愈广泛，那么，因为先后端分离引起的跨域问题，你知道怎么解决吗？javascript

什么是跨域

跨域是指 不一样域名之间相互访问。即浏览器控制当前网页下不能执行其余网站的脚本，这是由浏览器的同源策略形成的，是浏览器对JavaScript施加的安全限制。
也就是若是在A网站中，咱们但愿使用Ajax来得到B网站中的特定内容
若是A网站与B网站不在同一个域中，那么就出现了跨域访问问题。css

跨域的安全限制都是对浏览器端来讲的，服务器端是不存在跨域安全限制的。html

同源策略
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即使两个不一样的域名指向同一个ip地址，也非同源。
前端发起的请求只要不符合同源策略就会出现跨域问题。前端

案例分析java

URL 说明 是否容许通讯
http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 容许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js		 同一域名下不一样文件夹 容许
http://www.a.com:8000/a.js
http://www.a.com/b.js		 同一域名，不一样端口 不容许
http://www.a.com/a.js https://www.a.com/b.js 同一域名，不一样协议 不容许
http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不容许
http://www.a.com/a.js http://script.a.com/b.js 主域相同，子域不一样 不容许
http://www.a.com/a.js http://a.com/b.js 同一域名，不一样二级域名（同上） 不容许（cookie这种状况下也不容许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js		 不一样域名 不容许

为何先后端分离后会致使跨域问题？

先后端分离后，前端代码和后端代码都是独立部署的，通常前端采用Nginx做为web服务器部署，后端spring boot因为内置了tomcat，通常都是经过jar包直接启动。
假设先后端部署在同一台服务器上，那么2者访问的端口一定不一致，不符合同源策略，因此出现跨域问题。
若是先后端部署在不一样服务器上，那么访问的ip或者域名必然不一致，也会出现跨域问题。jquery

经过jsonp实现跨域

jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
一个是描述信息的格式，一个是信息传递双方约定的方法。nginx


前端json请求示例：web

<!DOCTYPE html>
<html>
<head>
<title>测试跨域访问</title>
<meta charset="utf-8" />
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type : "get",
                async : true,
                jsonp : "callbackName",// 后端接口参数名
                jsonpCallback : "callbackFunction", // 回调函数名
                url : "http://A/hello/map/getUser.json",
                dataType : "jsonp", // 数据格式为 jsonp
                success : function(data) {
                    console.log("success");
                }
            });
        });
    </script>
    <script type="text/javascript">
        var callbackFunction = function(data) {
            alert('接口返回的数据是：' + JSON.stringify(data));
        };
    </script>
</body>
</html>

后端jsonp代码参考：ajax

/**
 * 
 * The class JsonBackController.
 *
 * Description:该控制器返回一串简单的json数据,json数据由一个简单的User对象组成
 *
 * @author: huangjiawei
 * @since: 2018年6月12日
 * @version: $Revision$ $Date$ $LastChangedBy$
 *
 */
@RestController
@RequestMapping(value = "/map")
public class JsonBackController {
    private static final Logger logger = LoggerFactory.getLogger(JsonBackController.class);
    /**
     * 解决跨域请求数据
     * @param response
     * @param callbackName 前端回调函数名
     * @return
     */
    @RequestMapping(value = "getUser.json")
    public void getUser(HttpServletResponse response, @RequestParam String callbackName) {
        User user = new User("huangjiawei", 22);
        response.setContentType("text/javascript");
        Writer writer = null;
        try {
            writer = response.getWriter();
            writer.write(callbackName + "(");
            writer.write(user.toString());
            writer.write(");");
        } catch (IOException e) {
            logger.error("jsonp响应写入失败！ 数据：" + user.toString(), e);
        } finally {
            if (writer != null) {
                try {
                    writer.close();
                } catch (IOException e) {
                    logger.error("输出流关闭异常！", e);
                }
                writer = null;
            }
        }
    }
}

因为JSONP的原理其实就是欺骗浏览器，以<script></script>方式调用接口，解析数据。因此，jsonp的请求方式只能是get方式，若是接口只接受post请求方式，则再作考虑。
这种方式代码侵入强，请求方式也有限制，如今基本再也不使用。spring

Spring Boot对JSONP的支持
4.1版本之后的SpringMVC中，为咱们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据（SpringBoot接收解析web请求是依赖于SpringMVC实现的）
使用AbstractJsonpResponseBodyAdvice来支持跨域请求很简单，只须要继承这个类就能够了。具体代码以下：

全局jsonp请求配置：

package com.laowan.jsonp.config;

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

/**
 * Created by wb-zhangkenan on 2016/12/1.
 */
@ControllerAdvice(basePackages = "com.laowan.jsonp.controller")
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
    public JsonpAdvice() {
        super("callback","jsonp");
    }
}

测试接口：

package com.laowan.jsonp.controller;

import com.laowan.jsonp.domain.PersonDomain;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Created by wb-zhangkenan on 2016/12/1.
 */
@RestController
@RequestMapping("/jsonp")
public class JsonpTestController {
    @Autowired
    private PersonDomain personDomain;

    @RequestMapping(value = "/testJsonp",produces = MediaType.APPLICATION_JSON_VALUE)
    public PersonDomain testJsonp(){
        return personDomain;
    }
}

当发送的请求为：http://localhost:8003/jsonp/testJsonp?callback=callback的时候，返回的数据就是jsonp的；
当咱们请求参数中不带callback的时候：http://localhost:8003/jsonp/testJsonp，返回的数据是json的。

利用Nginx解决跨域

经过反向代理服务器监听同端口，同域名的访问，不一样路径映射到不一样的地址，好比，在nginx服务器中，监听同一个域名和端口，不一样路径转发到客户端和服务器，把不一样端口和域名的限制经过反向代理，来解决跨域的问题。

方式一：经过Nginx反向代理，将跨域请求转变为非跨域请求，不一样请求路径代理到不一样的地址：

server {
        listen       80;
        server_name  abc.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location /client { #访问客户端路径
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
        location /apis { #访问服务器路径
            rewrite  ^/apis/(.*)$ /$1 break;
            proxy_pass   http://localhost:82;
       }
}

方式二：经过Nginx在请求头中添加CORS参数解决跨域

location / {
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

   if ($request_method = 'OPTIONS') {
     return 204;
   }
}

利用CORS解决跨域问题

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它容许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS须要浏览器和服务器同时支持。目前，全部浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。

所以，实现CORS通讯的关键是服务器。只要服务器实现了CORS接口，就能够跨源通讯。

CORS与JSONP的使用目的相同，可是比JSONP更强大。
JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

CORS核心参数介绍。

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

（1）Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，代表服务器支持的全部跨域请求的方法。注意，返回的是全部支持的方法，而不单是浏览器请求的那个方法。这是为了不屡次"预检"请求。

（2）Access-Control-Allow-Headers
若是浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，代表服务器支持的全部头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。

（4）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即容许缓存该条回应1728000秒（即20天），在此期间，不用发出另外一条预检请求。

更多原理能够参看：阮一峰   写的跨域资源共享 CORS 详解
http://www.ruanyifeng.com/blog/2016/04/cors.html

spring boot中使用CORS

方式一：在须要指出跨域的Controller类或方法上添加@CrossOrigin注解

@CrossOrigin // 注解方式  
@RestController  
public class HandlerScanController {  
    @CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod.GET,  
            RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS,  
            RequestMethod.HEAD, RequestMethod.PUT, RequestMethod.PATCH}, origins="*")  
    @PostMapping("/confirm")  
    public Response handler(@RequestBody Request json){  
        return null;  
    }  
}  

方式二：配置CorsFilter，能够全局生效  （推荐）

/**
 * 实现基本的跨域请求
 * @author linhongcun
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 容许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 容许任何头
        corsConfiguration.addAllowedMethod("*"); // 容许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

固然，若是微服务多的话，须要在每一个服务的主类上都加上这么段代码，这违反了DRY原则，更好的作法是在zuul的网关层解决跨域问题，一劳永逸。

方式三：直接对WebMvcConfigurer进行配置，对全部请求都添加跨域参数

@Configuration  
    public class MyConfiguration {  
        @Bean  
        public WebMvcConfigurer corsConfigurer() {  
            return new WebMvcConfigurerAdapter() {  
                @Override  
                public void addCorsMappings(CorsRegistry registry) {  
                    registry.addMapping("/**")  
                    .allowCredentials(true)  
                    .allowedMethods("GET");  
                }  
            };  
        }  
    } 

总结

一、什么是跨域？
二、为何先后端分离后会产生跨域问题？
三、解决跨域有哪些方式？

参考：
https://blog.csdn.net/zknxx/article/details/53443181
https://blog.csdn.net/qq_43486273/article/details/83272500
http://www.ruanyifeng.com/blog/2016/04/cors.html

以为有用，记得点赞加关注。

跟着老万学java



本文分享自微信公众号 - 跟着老万学java（douzhe_2019）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程