【发布时间】：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 控制台中记录的确切错误消息是什么？
标签： reactjs express nginx cors cloudflare