前后端跨域

---

目录

一、在后端中解决

二、在前端中解决

---

一、在后端中解决

后端：书写在config包中书写

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
    /*
    全局配置需要添加自定义类实现 WebMvcConfigurer 接口，然后实现接口中的 addCorsMappings 方法。下面是一个简单的样例代码：
        addMapping：表示对哪种格式的请求路径进行跨域处理。
        allowedHeaders：表示允许的请求头，默认允许所有的请求头信息。
        allowedMethods：表示允许的请求方法，默认是 GET、POST 和 HEAD。这里配置为 * 表示支持所有的请求方法。
        maxAge：表示探测请求的有效期
        allowedOrigins 表示支持的域
        采用如下配置，直接让所有请求、所有域都支持跨域：
     */
    public void addCorsMappings(CorsRegistry registry) {
        registry
            	.addMapping("/**")//设置跨域访问路径:/：根目录* ：文件 **：子文件
                .allowedHeaders("*")
                .allowedMethods("*")//设置请求方式：允许所有请求
                .maxAge(1800)
                .allowedOrigins("*");
    }
}

二、在前端中解决

前端：书写在vue.config.js中

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,  // 关闭语法检查 如果为true要求命名规范为驼峰
    devServer: {
        proxy: {
            '/api': {
                // 后台服务器的网址，到项目名称就行 具体路径由axios请求
                target: 'http://localhost:8686/',
                // 是否开启本地代理 默认true
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
})

---