前后端分离解决跨域问题

前端解决跨域

与src同级目录新建vue.config.js配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	
  transpileDependencies: true,
  // 语法检查 关闭
  lintOnSave:false,
  //代理访问解决前后端跨域问题
  devServer:{
  //后端请求端口
    proxy:"http://localhost:8081"
  }
})

后端解决跨域问题

1
添加@CrossOrigin注解在控制层

springboot项目中配置一个封装类：

1
2
3
4
5
6
7
8
9
10
11
12
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}