程序员社区

前后端分离,后端用SpringBoot遇到的跨域问题

对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。简单来说就是不同域名之间相互访问

同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

例如:
http://www.a.com 要访问 http://www.b.com 这样域名不同,属于跨域
http://www.a.com:8081/index.html调用http://www.a.com:8080的接口 这样端口号不同 也属于跨域
http://www.a.com:访问https://www.a.com 这样也是属于跨域 协议不一样

所以在以前前后端不分离的开发模式中,从来不用关注这个问题,因为所有的请求都是在同一个域内

综合了网上解决跨域的方式目前有两种

1.使用JSONP

不过我不太推荐使用,JSONP只支持GET请求,不管是对于前端还是后端来说,写法与我们平常的ajax写法不同,同样后端也需要作出相应的更改。
JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

2.通过cors协议解决跨域问题

CORS支持所有类型的HTTP请求。
这个也是我非常推荐大家使用的方法
下面我来说下项目中遇到的问题
前端:vue.js
后端:springboot

前端请求接口时,报错信息如下
Origin 'http://localhost:8080' is therefore not allowed access.
 The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute

解决方法:
前端请求开启 withCredentials: true
后台接口也需要对应的将 Access-Control-Allow-Credentials 设为 true

前端携带token传后端时报错
Request header field token is not allowed by 
Access-Control-Allow-Headers in preflight response.

这是由于请求头内并没有这个名叫token的请求头字段
默认情况下,只有六种 simple response headers (简单响应首部)可以暴露给外部:
Cache-Control Content-Language Content-Type Expires Last-Modified Pragma
如果想要让客户端可以访问到其他的首部信息,可以将它们在
Access-Control-Expose-Headers 里面列出来。

所以解决方法是:

Access-Control-Allow-Headers添加自定义的请求头字段Token
如果还有其他请求头字段需要使用,也是需要在Access-Control-Allow-Headers添加,不然服务器是不允许的

后面还有一个问题:
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access. 
The response had HTTP status code 503.

这个是请求头返回服务不可用

解决方式:

我看了下代码原来是我写了两个跨域过滤一个是用写过滤器Filter,一个是继承
webmvcconfigureradapter然后我注释了其中一个就可以了,我想应该是两个跨域处理器冲突了

拓展

现在开发客户端都是发非简单请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者
Content-Type字段的类型是application/json。也就是通过json数据交互
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

流程

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的
XMLHttpRequest请求,否则就报错。

"预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。
一般不特殊指定源的话都将Access-Control-Allow-Origin设置为*
除了Origin字段,"预检"请求的头信息包括两个特殊字段。
(1)Access-Control-Request-Method
该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法
所使用到的方法也是要在跨域处理器中说明
也就是在Access-Control-Allow-Methods中加入各种请求方法
例如:POST PUT, GET, OPTIONS, DELETE
(2)Access-Control-Request-Headers
该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段
这个上面有说到,项目需要什么额外的请求头字段就添加上去
服务器收到"预检"请求以后,检查了OriginAccess-Control-Request-Method
Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。
说了这么
我分享下我的跨域处理的代码(我这里是使用过滤器的写法,也可以使用继承
webmvcconfigureradapter的方法)

@Component
public class CorsFilter implements Filter {

    /*跨域请求配置*/
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;

        HttpServletRequest reqs = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "5000");
        response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token");
        chain.doFilter(req, res);
    }
    @Override
    public void init(FilterConfig filterConfig) {}
    @Override
    public void destroy() {}
}

继承webmvcconfigureradapter的方法

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST", "OPTIONS", "PUT")
                .allowedHeaders("Content-Type", "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method",
                        "Access-Control-Request-Headers")
                .exposedHeaders("Access-Control-Allow-Origin", "Access-Control-Allow-Credentials")
                .allowCredentials(true).maxAge(3600);
    }
}

注:以上写法二选一即可,两个都写估计还是会冲突,两者作用一样只是写法不同

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 前后端分离,后端用SpringBoot遇到的跨域问题

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区