Vue前后端分离中跨域问题解决

最新推荐文章于 2024-09-08 11:14:16 发布

CodingBugs

最新推荐文章于 2024-09-08 11:14:16 发布

阅读量501

点赞数

分类专栏： Vue 文章标签：跨域 Vue

本文链接：https://blog.csdn.net/qq_33061377/article/details/84067760

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

两种方式：

1. 后台设置

后台用SpringBoot开发

@Configuration
public class CustomCORSConfiguration {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");                        // 允许所有的请求
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

2. config/index.js

proxyTable: {
      '/api': {
        target: 'http://localhost:8000/',   // 后台地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

前端地址：
localhost:8001/api/user/1 ==> localhost:8000/user/1

加一个前缀api用于区分模板和接口，如不加api：localhost:8001/index 模板地址会被代理
无法识别是一个访问接口还是模板地址