egg+vue+nginx 前后端分离跨域？

Question

求教各位大神一个问题，我前端用vue 后端用egg.js通过restful api进行请求。egg已经通过cors设置了允许跨域。
但是在部署的时候使用nginx进行了反向代理，但还是会出现跨域的问题。

我觉得是nginx配置的问题。但是不知道该如何解决。

前端vue+axios进行请求：
前端axios的baseUrl配置。必须配置到后端的egg的默认7001端口，否则会有跨域问题。

后端：宝塔面板+egg+nginx反向代理

#PROXY-START/
location /
{
    expires 12h;
    if ($request_uri ~* "(php|jsp|cgi|asp|aspx)")
    {
         expires 0;
    }
    proxy_pass http://127.0.0.1:7001;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    #持久化连接相关配置
    #proxy_connect_timeout 30s;
    #proxy_read_timeout 86400s;
    #proxy_send_timeout 30s;
    #proxy_http_version 1.1;
    #proxy_set_header Upgrade $http_upgrade;
    #proxy_set_header Connection "upgrade";

    add_header X-Cache $upstream_cache_status;
    
    
}

#PROXY-END/

试了如下几种方法：

1. 在nginx的lisetn serv端添加 add_header Access-Control-Allow-Origin *; 此方法无效
2. 在反向代理端 设置proxy_set_header 'Access-Control-Allow-Origin' '*'; 会提示我设置了多个cors。

3.http 通过配置baseUrl 到7001端口可以成功
4.https 配置到7001端口同样会提示跨域

好崩溃啊，试了好几个小时也没解决。

Answer 1

反向代理是，将浏览器对 同一域名：端口下的 发送请求， 代理服务器再去请求不同的 域名：端口
举例说明就是 nginx 监听 3000端口。

那么Nginx的配置应该是

listen 3000 #监听3000端口

有人发送请求过来
location /html { #以 /html 开头的连接， 代理前端
    proxy_pass: 前端服务器
}

location /api { #以 /api开头的连接，代理 后台服务器
    proxy_pass: 后台服务器
}

浏览器 访问 localhost: 3000/html/index.html -》 nginx 去 请求前端页面
网页请求 localhost: 3000/api/data -> nginx 去 请求 后台接口
对于浏览器而言，都是请求的 localhost:3000
nginx 代理服务器 会根据其链接的不同， 去请求不同的服务器

Answer 2

求大神帮忙看一下

Answer 3

你这个问题解决了吗？我与你有相同的遭遇！