SpringBoot和Vue前后端分离项目如何解决请求跨域问题
问题场景
刚开始来练手前后端分离的项目,后端boot项目地址端口为9090,前端地址端口为8080,所以如果不做任何处理去请求后端的方法的时候,前端页面F12就会报下面的内容
前端问题:
Access to XMLHttpRequest at ‘http://localhost:9090/api/city/getCitys’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解决办法
1、前端添加配置信息
2、后端添加配置类
Vue:
1、 找到jest.config.js
2、 在合适的地方添加下面代码
以下是ES6的写法
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:9090',//这里为后端项目的地址
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
3、 后端添加配置类,@ Configuration注解的类会再项目启动的时候自动加载
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
3、注意事项
因为改了配置文件,记得重启前后端项目