我当前的实施方式：

Question

假设我有两个服务器A和B：
A -> React App服务器
B -> API服务器（在我的示例中为Express节点）
我都可以控制。

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

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

但是，当我通过邮递员向API服务器发出GET请求时，将被重定向。我知道发生这种情况是因为React应用服务器未在API服务器上注册到CORS。

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

当前，他们正在通过向API服务器发出GET请求，获取重定向URL作为响应并在客户端进行重定向来进行解决。

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

我希望请求流为：
React App [ app.com ] ---- GET ----> Api服务器[ api.app .com ]）– ---- 重定向 ----> 外部URL

我当前的实施方式：

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'）;对于快速重定向到外部URL和用CORS表示，我认为您不应该在react app中遇到该错误，因为您正在执行服务器重定向，并且当您尝试从前端URL命中服务器API时会发生CORS错误。尚未添加到CORS中，或者您可以在服务器中将CORS标头设置为*或设置要授予访问权限的特定URL。如果从服务器API响应重定向中收到CORS错误，则可能是您做的不正确。

Answer 2

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

通过React App

我当前的实施方式：

2 个答案: