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