vue前端访问后台微服务跨域问题

1、部署现状

  • 前端VUE部署在Nginx服务中
  • 后台微服务通过NodeJS网关反向代理

2、问题现状

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

3、解决方案

  • NodeJS增加跨域支持
app.all("*",function(req,res,next){
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","*");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");

}
  • Nginx增加跨域支持
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

4、在SpringBoot微服务Controller中类上添加跨域注解

@CrossOrigin

 

你可能感兴趣的:(服务器)