nginx 上 Cloudflare、ExpressJS 和 ReactJS 的 CORS 错误

Posted 2023-03-04

【中文标题】nginx 上 Cloudflare、ExpressJS 和 ReactJS 的 CORS 错误

【英文标题】：CORS Errors with Cloudflare, ExpressJS and ReactJS on nginx

【发布时间】：2021-06-21 11:20:56

【问题描述】：

通过 Cloudflare 切换到域名后，我一直无法克服 CORS 错误。我似乎无法让后端 api 使用像https://www.my_domain.com/api 这样的域名

我做了什么：

应用了nginx解决方案，重启了nginx 在 cloudflare 中，我使用三个 A 记录更新了 DNS 管理：*、www 和 在 cloudflare 中始终使用 HTTPS 设置为开启 ExpressJS 启用 cors 库

下面应用了 nginx 解决方案...

注意：我在 3000 端口上运行了 React。React 在浏览器中访问域名时显示！

location /api 
    proxy_pass http://localhost:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;



location / 
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

我用来测试和重启nginx的命令：

sudo nginx -t && sudo systemctl restart nginx

在 cloudflare DNS 管理中...

A record, Name: *, Content: <server_ip>, TTL: Auto, Proxy status: DNS only
A record, Name: <my_domain_name>, Content: <server_ip>, TTL: Auto, Proxy status: Proxied
A record, Name: www, Content: <server_ip>, TTL: Auto, Proxy status: Proxied

在 cloudflare、SSL/TLS、Edge 证书中，始终使用 HTTPS 设置为开启。

ExpressJS 启用 cors 库

当然，我已经添加了 cors 库来表达如下：

const express = require("express");
const cors = require("cors");
require('dotenv').config()

const app = express();

if (process.env.NODE_ENV === 'production') 
    app.use(cors( origin: `$process.env.CLIENT_URL` ));

我的后端 .env 文件：

NODE_ENV=production
CLIENT_URL=http://my_domain.com

我的前端反应 .env 文件

CLIENT_URL=/api

我还注意到，在浏览器控制台中，它显示请求以http://<server_ip>:8000/api 发送，而不是预期的https:<domain_name>/api。

另外，我今天刚改了域名。

尽管有上述这些设置，但当我尝试登录时，我看到请求由于 cors 错误而被阻止。

什么可能导致 cors 错误？

【问题讨论】：

浏览器在 devtools 控制台中记录的确切错误消息是什么？

【参考方案1】：

按照本教程...

https://medium.com/@nishankjaintdk/serving-a-website-on-a-registered-domain-with-https-using-nginx-and-lets-encrypt-8d482e01a682

导致发现这些指令...

https://certbot.eff.org/lets-encrypt/ubuntubionic-nginx

在我的 linux 终端中运行这些命令（来自 certbot 指令）...

sudo snap install core; sudo snap refresh core; sudo apt-get remove certbot; sudo snap install --classic certbot; sudo ln -s /snap/bin/certbot /usr/bin/certbot; sudo certbot --nginx

此时出现域名提示。所以，我这样输入了我的域...

my_domain.com www.my_domain.com

按照说明，然后我测试了续订（您需要每年续订，但这些将被放入 cron 中*希望自动续订）

sudo certbot renew --dry-run

域 api 工作，但 react 应用程序尚未显示，这表明 Cloudflare 中可能存在问题。

之后，我的网站像这样显示在浏览器中...

登录 Cloudflare.com 转到域的 SSL/TLS 加密设置 将其从灵活更改为完整 点击了边缘证书 关闭 HTTPS 始终开启

完成上述所有操作后，域显示了我的反应应用程序，该应用程序与 api 完全配合，没有 CORS 错误。