目录
一、在后端中解决
后端:书写在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("*");
}
}
二、在前端中解决
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': ''
}
}
}
}
})