VUE+Springboot前后端分离开发处理跨域问题

前端处理(前端干不过后端使用此方案)：

修改config目录下的index.js文件：

    proxyTable: {
      //匹配代理的url
      '/api':{
        target:'http://127.0.0.1:80', //实际需要请求的接口域名（IP+端口）
        pathRewrite:{'^/api':'/'},    //表示重写规则
        changeOrigin:true             //表示是否跨域
        //举例解释：根据以上配置，若请求地址为'/api/test/test1'，则根据以上代理规则将请求发送到：http://127.0.0.1:80/test/test1
      }
    },

其实也不难理解，
target就是实际中我们需要请求的接口地址(IP+端口)；
pathRewrite是代理规则，我的理解是看到’/api’开头的请求地址就把’/api’替换为上面target的内容，也就是我们实际请求的IP+端口；
changeOrigin表示是否跨域，既然我们是解决跨域问题的，那肯定是跨域(true)；

再啰嗦下：
如果按照我上面的配置，我想请求地址：http://127.0.0.1:80/test/test1，那么在前端我应该写的请求地址是/api/test/test1，因为代理规则看到’/api’开头的请求，会把’/api’替换为target的内容，也就是http://127.0.0.1:80，最后经过代理这么一折腾，我们实际的请求地址就变成了http://127.0.0.1:80/test/test1，最终达到了目的，解决了跨域。
应该写的请求地址：

请求地址必须是’/api’开头（和config目录下的index.js配置保持一直）。

后端处理(前端是妹子或者后端干不过前端使用此方案)：

@CrossOrigin(originPatterns = "*", methods = {RequestMethod.GET, RequestMethod.POST})

此注解用在Controller上，则该Controller中所有接口可以跨域访问（大颗粒度）

@CrossOrigin(origins = "http://localhost:80", maxAge = 3600)

此注解用在Controller上，则该Controller中所有接口可以跨域访问（且只能指定地址访问）

@CrossOrigin(allowCredentials = "true", allowedHeaders = "*")

此注解用在Controller中某个方法上，则只有此方法接口支持跨域访问（小颗粒度）

@CrossOrigin(originPatterns = "http://localhost:80")

此注解用在Controller中某个方法上，则只有此方法接口支持跨域访问（且只能指定地址访问）

终极方式(简单粗暴)：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @description 解决跨域问题配置
 * Create by sunlm
 * on 2021-12-17 17:54
 * Make small but daily progress
 */
@Configuration
public class WebMVCConfiguration implements WebMvcConfigurer {

    /**
     * 配置后端服务器可以跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//    '/*' 匹配一级目录;'/**' 匹配多级目录(使用最多)
                // 允许跨域访问资源定义： '/**' 表示所有资源  还可以写为：.addMapping("/api/**") 指定层级
                .allowedOrigins("*")
                //配置源 通配(那台服务器可以访问)     还可以写为：.allowedOrigins("https://localhost:80")
                .allowCredentials(true)
                //是否允许携带cookie
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 允许 GET", POST, PUT, DELETE 方法
                .maxAge(1800);
                //允许跨域的持续时间
                //.allowedHeaders("header1", "header2", "header3")
                //.exposedHeaders("header1", "header2")
                //.allowedHeaders("*")
                //.exposedHeaders("Access-Control-Allow-Origin")
    }
}