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

报错： No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:80' is therefore not allowed access

百度了两三个小时，很多都说设置config/index.js 的“proxyTable”属性，我设置了并没有用，也可能是我没写对

调用地址直接写代理地址会自动拼接当前vue服务的域名，最后当然是报404。。。

proxyTable: {
      '/api':{
        target: 'http://localhost:80/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,//如果需要跨域
        pathRewrite: {
          '^/api': 'http://localhost:80/',//调用接口直接写‘/api/user/add’即可
        }
      }
    },

跨域一直是个很玄学的问题，前端没办法了我就想在后端解决，

只需要加一个配置类， 重写addCorsMappings方法即可

package com.xxx.web.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.concurrent.ConcurrentTaskExecutor;
import org.springframework.web.servlet.HandlerExceptionResolver;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.config.annotation.AsyncSupportConfigurer;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
import java.util.concurrent.Executors;

/**
 * @description {跨域请求支持}
 * <p>
 * Create by xxxxx on 2020/3/31 14:11.
 */
@Configuration
public class WebMvcConfigurer extends WebMvcConfigurationSupport {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        /*
         * 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
         */
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOrigins("*");
    }

    @Override
    protected void configureAsyncSupport(AsyncSupportConfigurer configurer) {
        configurer.setTaskExecutor(new ConcurrentTaskExecutor(Executors.newFixedThreadPool(3)));
        configurer.setDefaultTimeout(30000);
    }
}

虽然这个可以解决跨域问题，让axios读取到后端数据，

但是使用此方法配置之后再使用自定义拦截器时跨域相关配置就会失效。

原因是请求经过的先后顺序问题，当请求到来时会先进入拦截器中，而不是进入Mapping映射中，所以返回的头信息中并没有配置的跨域信息。浏览器就会报跨域异常。

正确的解决跨域问题的方法时使用CorsFilter过滤器。代码如下：

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

    private CorsConfiguration addCorsConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(3600L);
        return corsConfiguration;
    }

参考文章：【SpringMVC】与权限拦截器冲突导致的Cors跨域设置失效问题