springBoot 结合 Vue项目跨域问题

最新推荐文章于 2024-08-13 20:38:59 发布

翻译最新推荐文章于 2024-08-13 20:38:59 发布 · 725 阅读

文章标签：

#vue跨域 #springBoot跨域 #跨域

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种解决Vue结合SpringBoot项目跨域问题的方法。通过在SpringBoot中配置CorsFilter实现跨域，并在Vue项目的proxyTable中设置代理，确保前后端分离开发时能正常请求数据。

问题：解决开发过程中springBoot 结合 Vue项目跨域问题

解决方法：

在springBoot项目中添加一个配置类


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 由于使用vue + springBoot开发前后端完全分离的项目，因此需要解决跨域问题。
 * 此配置类作用：实现允许跨域功能
 */
@Configuration
public class CorsConfig {

    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);
    }
}

在vue项目中config目录下的index.js文件添加以下配置

proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
    }

target：表示后台的地址。在api中直接使用/api代替后台地址