跨域问题处理

打磨时间的针

已于 2024-04-24 09:59:46 修改

阅读量140

点赞数

分类专栏：常见问题处理文章标签： spring boot vue

于 2024-04-24 09:57:08 首次发布

原文链接：https://zhuanlan.zhihu.com/p/165942717

版权

常见问题处理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文讲述了在Vue项目中遇到的跨域问题，涉及前端使用proxyTable进行代理配置以及后端SpringBoot中如何通过WebMvcConfigurer实现CORS策略，确保跨域请求的访问控制。

摘要由CSDN通过智能技术生成

问题描述：

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

这个问题通过字面意思，可以看出来是跨域问题，这个是去检查前后端代码，是不是跨域没有设置好，比如我这次后端的没有弄好，所以就报这种错误。

前端设置

如果是vue的话，就可以如下方式

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target:'http://localhost:8443', //后期可以改
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''
        }
      }
    }, //配置跨域支持

后端设置

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