通过来自 React App 的 GET 请求从 express 服务器重定向到外部 URL

Question

假设我有两台服务器 A 和 B：
A -> React App 服务器
B -> API 服务器（在我的例子中是 Node 和 Express )
我都可以控制。

我在服务器 B 上启用了 CORS，并且在开发中我在客户端应用的 package.json 中使用代理 来查询 API 服务器。

现在的问题是，当我从服务器 A 向 API 服务器发送 GET 请求并要求它重定向到另一个外部 URL 时，我的 React 应用程序中出现了 CORS 错误。

但是，当我通过 Postman 向 API 服务器发出 GET 请求时，我被重定向了。 我知道发生这种情况是因为当 API 服务器注册时，反应应用服务器未向 CORS 注册。

如果两个应用程序位于同一台服务器上，则可以缓解此问题。如果我错了，请纠正我？

目前正在通过向 API 服务器发出 GET 请求、获取重定向 URL 作为响应并在客户端执行重定向来解决此问题。

现在我的问题是，是否有任何其他可能的方式我不必将重定向 url 作为响应/将两个应用程序放在同一服务器上，而是直接进行重定向？

我希望请求流是：
React 应用 [app.com] ----GET----> Api 服务器[api.app .com]) ----重定向----> 外部网址

我目前的实现：

API 片段

try {
    let url = await Urls.findOne({ shortCode: shortCode });

    if(!url) {
        // Send 404
        return res.status(404).send({ status: "NOT_FOUND" });
    }
    // Redirect to original URL
    //res.redirect(url.longUrl);
    return res.status(200).send({ status: "FOUND", url: url.longUrl });
}
catch(error) {
    console.log(error);
    return res.status(500).send({ status: "FAILED" });
}

客户端

componentDidMount() {
    let id = this.props.match.params.id;

    axios.get(`/api/${id}`)
        .then(response => {
            window.location.replace(response.data.url);
        })
        .catch(error => {
            this.setState({ displayError: true, errorType: error.response.data.status })
        });
}

Answer 1

你可以使用 res.redirect(301, 'http://example.com');对于以 express 和 CORS 方式重定向到外部 URL，我认为您不应该在 react 应用程序中出现该错误，因为您正在执行服务器重定向，并且当您尝试从前端 URL 访问服务器 API 时会发生 CORS 错误，并且尚未添加到 CORS，或者您可以将服务器中的 CORS 标头设置为 * 或设置您想要访问的特定 URL。如果您在从服务器 API 响应重定向时收到 CORS 错误，那么您可能做错了什么。

Answer 2

您确定response.data.url 是有效的网址还是未定义的网址？尝试console.log(response.data.url) 进行确认。 如果未定义，则将服务器中的 res.send() 替换为 res.json()