Cors + Nginx + Nodejs（VUE 前端 + 后端）不起作用答案

【问题标题】：Cors + Nginx + Nodejs (VUE Frontend + Backend) doesn't workCors + Nginx + Nodejs（VUE 前端 + 后端）不起作用
【发布时间】：2020-05-24 11:35:00
【问题描述】：

我的后端 Nodejs 在端口 23456 上运行
我的前端 VUE 在端口 8080 上运行

当我启动它们并访问我的域时，例如。 test.dev 前端是可见的，但是我无法登录..感觉它根本没有触发 DB。后端启动良好，前端启动良好，只是感觉它们彼此不通信，因为它们是不同的端口。

几天来，我一直在阅读这方面的内容，这似乎是一个 CORS 问题，我试图找到正确的配置，但由于我是菜鸟，所以没有任何作用。

我目前正在运行 NGINX，这就是我的文件现在的样子（etc/nginx/sites-available/test.dev.conf：

server {
listen 80;
server_name test.dev www.test.dev;
return 301 https://test.dev$request_uri;
}

server {
# Enable HTTP/2
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name test.dev www.test.dev;
# Use the Let's Encrypt certificates
ssl_certificate /etc/letsencrypt/live/test.dev/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/test.dev/privkey.pem;
# Include the SSL configuration from cipherli.st
include snippets/ssl-params.conf;
location /api {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://localhost:23456;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

location / {
    add_header 'Access-Control-Allow-Origin' 'http://localhost:8080' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' always;

    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

}
}

我可以访问 test.dev 并且可以看到前端，但是单击登录不起作用。感觉它根本没有连接到后端，这是另一个端口，我不知道如何让它工作..

这是我得到的控制台中的错误：

知道我的 .conf 文件应该是什么样子吗？

提前致谢。

【问题讨论】：

浏览器在 devtools 控制台中记录的确切错误消息是什么？
@sideshowbarker 在描述中添加了错误日志
那些日志显示 ERR_CONNECTION_REFUSED。这不是 CORS 错误。如果您尝试直接在浏览器中打开 localhost/socksjs-node/info (https) 和 localhost:8080/sockjs-node/info (https) 会发生什么？如果您改为尝试 localhost/socksjs-node/info (http) 和 localhost:8080/sockjs-node/info (http) 会发生什么？
/api 位置是否返回任何内容以及您从前端向哪个 url 发出请求？

标签： node.js vue.js nginx

【解决方案1】：

我设法以某种方式找到了解决方案。
所以我想分享的是，上面贴出的代码是正确的。

现在，解决方案是我在前端 VUE 中进行了更改，以便从以下位置读取 API：

http://localhost:23456/api/v1

到

https://test.dev/api/v1

就是这样。登录工作只是找到，一切正常...... 感谢大家的帮助！

【讨论】：