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

Posted 2023-03-04

【中文标题】通过来自 React App 的 GET 请求从 express 服务器重定向到外部 URL

【英文标题】：Redirect to external URL from express server via GET request from React App

【发布时间】：2019-04-17 02:45:27

【问题描述】：

假设我有两台服务器 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 )
        );

【问题讨论】：

这似乎不可能（见第一个答案here）。将应用程序和 API 放在同一个源上应该可以工作。

好的。关于 url 缩短器如何处理这种情况的任何想法，因为我的项目是 url 缩短器。

如果你的应用是由 nginx 服务的，你可以将 api-traffic 代理到 API server，如果你把它全部放在路径 'api' 下。喜欢here

目前正在通过 react 应用程序的 package.json 中的代理将来自 localhost:3000 的请求代理到 api 服务器 localhost:3001。 nginx 服务应用程序的处理方式会不同吗？见here

【参考方案1】：

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

【讨论】：

我尝试使用 301、302，但没有发生重定向。我已经使用 cors 模块启用了 CORS。当我使用邮递员而不是从反应应用程序访问服务器 API 时，会发生重定向

@Ayan，请问您是如何解决这个问题的？我在同一条船上

您的应用程序用例是什么？

@mark 我保留了最初的实现。向 api 服务器请求原始 url，然后在客户端进行重定向。如果我需要直接重定向，那么我不能使用 REST api 服务器。

感谢阿扬的回复。只要从 api 服务器返回的 URL 中没有敏感信息，我认为您的解决方案很糟糕

【参考方案2】：

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

【讨论】：

这是一个有效的网址。确认和测试。

为了开发，我的 react 应用在 localhost:3000 上运行，节点应用在 localhost:3001 上运行