从 Express 重定向 API 在 React App 中调用

Question

我在我的 React 应用程序中定义了一个路由，它承载了以下组件：

import { connect } from 'react-redux';
import _ from 'lodash';
import React, { PureComponent } from 'react';
import { actions as redirectActions } from '../../state/actions/redirect';

class MyRedirector extends PureComponent {
    componentDidMount() {
        const { redirect, match } = this.props;
        redirect(match.params.someData);
    }

    render() {
        return <div />;
    }
}

MyRedirector = connect(state => ({}), { ...redirectActions })(
    MyRedirector
);

export default MyRedirector;

我正在调用后端 API，如下所示：

const redirect = someData => async dispatch => {
    await axios
            .get(
                `${process.env.REACT_APP_API_URL}/api/someRoute/${someData}`,
                {}
            )
            .then(data => {})
            .catch(error => {
                console.log('ERROR', error);
            });

在这个托管在 Node.js 快速服务器上的路由中，我运行以下代码：

 res.setHeader('Access-Control-Allow-Origin', req.get('origin'));
 res.redirect(
   new URL(
     `${req.get('origin')}/somePath/${
          someObject.data
        }/blabla?someQueryParam=${someData}`
   )
 );

想要的流程如下：

用户访问托管重定向组件的前端路由
向后端发出 Axios 请求
后端响应重定向
前端重定向用户以从后端

我不确定如何让它与上面的代码一起工作 - 在我的网络选项卡中，我看到来自 API 调用的 302 重定向，我还看到尝试加载重定向 URL，但因 CORS 错误而失败 - 页面本身没有发生重定向。

我很确定有更好的方法来实现这一目标。

Answer 1

如果您需要在成功 api 调用后路由用户，您可以使用 react-router-dom

中的 history 道具

const redirect = someData => async dispatch => {
    await axios
            .get(
                `${process.env.REACT_APP_API_URL}/api/someRoute/${someData}`,
                {}
            )
            .then(data => {
               //check for the success case here using if
              this?.props?.history?.push(your desired url)
            })
            .catch(error => {
                console.log('ERROR', error);
            });

如果你得到任何 history/push is undefined 你需要将组件包装在 react-router-dom.

提供的 HOC 中

import {withRouter} from 'react-router-dom'; 

export default withRouter(MyRedirector);

从 Express 重定向 API 在 React App 中调用

Redirect from Express API Call in React App

redirect

node.js

express

reactjs