时间戳

首页 > 解决方案 > 当后端位于实际服务器上时，如何使用 React 向 Express 后端发送请求？

reactjs - 当后端位于实际服务器上时，如何使用 React 向 Express 后端发送请求？

问题描述

我的应用在本地运行时运行良好，但现在我已经开始部署到外部服务器。当我尝试使用 axios 向后端服务器发出请求时，我要么阻止了 CORS 策略，要么如果我将“baseURL”留空，那么 CORS 允许请求通过，但在我的请求末尾添加一个“/”，因此阻止我在最后添加端口号（：4000）并实际与我的服务器通信。

Express 服务器在端口 4000 上运行，例如 IP 地址 22.111.22.111，域名 my-website.com，我可以使用 curl 很好地查询，React 应用程序由 Nginx 提供服务并通过 https 访问。

我的 Express 服务器如下所示：

const express = require('express')
const cors = require("cors")
const app = express()
const https = require("https")

app.use(cors())

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

app.get('/', (req, res, next) => {
        res.send('~ API is working properly!');
})

我的 Axios 请求如下所示：

const response = await axios.get('https://my-website.com:4000')

这会导致 CORS 阻止响应。

或者我可以提出这样的请求：

const response = await axios.get(':4000')

我假设使用 react 应用程序的来源自动查询此 URL：https://my-website.com/:4000 不幸的是，这不起作用，因为 axios 在端口号前添加了一个斜杠，为了摆脱这个斜杠，我必须手动输入立即导致 CORS 的 URL问题。

有谁知道如何解决这个问题？我觉得这应该是部署网站的一种非常常见的方式，但我在网上找到的答案都没有解决这个问题，因为将Access-Control-Allow-Origin属性添加到服务器对 CORS 错误没有任何影响。

标签： reactjsexpressaxiosmixed-content

解决方案

好的，以防万一有人遇到类似情况，这是我的解决方案：我的错误是我的 React 应用程序是通过 https 提供的，但我的服务器是通过 http 提供的，我试图通过 https 访问它，所以 URL 可以不可能工作。然后，当我尝试使用 http 访问它时，我遇到了无法在 https 网站上使用 http 加载资源的问题，因为这不安全（您会遇到混合资源错误）。

所以我的解决方案是也通过 Nginx 为我的 Express 服务器提供服务，以便可以通过 https 访问它，我遇到了一个问题，即当尝试使用非根路径（如 /backend）提供第二个位置时，我会得到一个404 Not Found 错误，解决方案是在末尾使用location /backend/斜杠，并proxy_pass http://localhost:4000/使用相同的斜杠。

推荐阅读