在开发前后端分离的项目时,必须解决的一个问题就是跨域请求问题。

1 什么是跨域请求

跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不同时的请求。即“协议 + 域名 + 端口号” 有不相同,那么就是跨域。

例如,如下在开发中遇到的跨域请求被拦截问题。

image-20220320142834251

前端的端口是8080,而后端的端口是8000,前端请求后端的时后端会检查request的origin,发现是8080,跟自己的8000不一致,就会有跨域拦截。

跨域请求问题可以在前端解决,也可以在后端解决。

1)前端的解决方法——使用正向代理,隐藏请求者真实地址。

使用正向代理时,后端发现请求方端口是8000(其实是代理的端口),认为是同源的就会放行。

vue项目的配置正向代理的做法是在.env.development和vue.config.js中添加以下配置。image-20220320105859762

image-20220320112815773

2)后端解决方法

后端的做法很简单就是对跨域请求进行放行。

spring项目解决跨域请求问题的做法如下:

​ 创建一个适配器ConfigurerAdapter实现WebMvcConfigurer接口的addCorsMappings方法,对所有跨域请求进行放行。

@Configuration
public class ConfigurerAdapter implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(false)
                .allowedMethods("POST","GET","DELETE","PUT","OPTIONS")
                .allowedOrigins("*")
        ;
    }
}

addCorsMappings()方法是设置跨域问题的,几乎是每个后台服务器都需要配置的东西。

还有另外一种解决方法,就是直接在对应Controller上添加@CrossOrigin注解,简单粗暴。

image-20220320114101121

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐