Cloudflare、ExpressJS 和 ReactJS 在 nginx 上的 CORS 错误

Question

在通过 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 错误的原因是什么？

Answer 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 Always On

完成上述所有操作后，域显示了我的 React 应用程序，它完全适用于 api，并且没有 CORS 错误。

Cloudflare、ExpressJS 和 ReactJS 在 nginx 上的 CORS 错误

CORS Errors with Cloudflare, ExpressJS and ReactJS on nginx

nginx

cors

express

cloudflare

reactjs