Vue跨域解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36255237/article/details/86215843

1.如果是后台是Spring boot项目，直接用下面的代码就可以解决跨域问题。

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;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

2 可以在Vue项目 config文件夹下的index.js找到proxyTable并设置如下代码

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

并且取main.js设置如下代码

Vue.prototype.$Api = '/api';

  然后在调用的时候 this.$Api   就等于http://127.0.0.1:8080