redux.js 中的 fetch(url) 使用错误的端口

Question

我有一个 MERN 应用程序，它使用以下组合：

1. Axios 的异步/等待，以及
2. Redux

管理整个应用程序的数据流。 Redux主要用于登录+授权(along these lines)。在我的应用程序的许多页面之间共享的其他一些表是通过 redux 获取的，并且可以通过 reduxState 访问。但是，由于我的 MERN 应用程序中的大多数路由都不需要共享状态，因此我只是使用 axios 从我的 Mongo 数据库中获取大部分数据。

我目前只有 redux 提取有问题，包括登录/授权以及通过 redux 提取的所有其他表。在我的控制台中，我收到有关 redux 操作的以下错误：

应用程序的节点 API 在端口 8080 上提供服务，如果我复制此 url，更改端口，然后将 http://localhost:8080/api/cbb/teams/list 直接粘贴到我的 chrome 浏览器中，它确实会返回我所期望的数据。所以我认为端口 3000 / 8080 存在问题。端口 3000 是应用程序客户端服务的地方（我相信），我认为这就是 Redux 向端口 :3000 发出 GET 请求的原因。

我的问题是，我可以做些什么来解决/调试这个问题，以便我的 Redux 获取再次工作？我假设我只需要将 Redux 提取到正确的端口“指向”，但我不确定如何执行此操作。

编辑 1

按照this question 的行，我的client 文件（包含我的所有前端代码）位于我的节点API 目录中。在我的client/package.json 文件中，我有一行"proxy": "http://localhost:8080",

编辑 2

这是来自teams-action 的主要函数，它构建然后获取的 URL：

export function fetchTeams(team, conference) {
    return dispatch => {
        let url = '/api/cbb/teams';
        if (team) { url += '/team/' + team; }
        else if (conference) { url += '/conference/' + conference; }
        else { url += '/list'; }

        console.log('fetchTeams url: ', url);
        dispatch(fetchSportsDataBegin());
        return fetch(url)
            .then(handleErrors)
            .then(res => res.json())
            .then(json => {
                dispatch(fetchSportsDataSuccess(json));
                return json;
            })
            .catch(error => dispatch(fetchSportsDataError(error)));
    };
}

fetchCBBTeams 是从页面的主容器组件调用的。打印出来的 url 就是 /api/cbb/teams/list，因为我故意不带参数调用它

Answer 1

这应该是您在客户端获取的数据

export function fetchTeams(team, conference) {
    return dispatch => {
        let host = "http://localhost:8080";
        let url = '/api/cbb/teams';
        if (team) { url += '/team/' + team; }
        else if (conference) { url += '/conference/' + conference; }
        else { url += '/list'; }

        console.log('fetchTeams url: ', url);
        dispatch(fetchSportsDataBegin());
        return fetch(host + url)
            .then(handleErrors)
            .then(res => res.json())
            .then(json => {
                dispatch(fetchSportsDataSuccess(json));
                return json;
            })
            .catch(error => dispatch(fetchSportsDataError(error)));
    };
}

通知let host = "http://localhost:8080"; 和return fetch(host + url)

只调用/api/cbb/teams 客户端将获得他的主机。与应该以 http 开头的 html 中的链接相同，如果您创建链接 www.google.com 会将您发送到 domain.com/www.google.com

Answer 2

您遇到了与链接问题相同的问题，same answer 将解决该问题。

如果您使用 package.json proxy 属性来配置 API 源，那么您需要找到某种方法将该值获取到您的应用程序代码中，并使用它来配置您正在生成的获取 URL。

例如，在您链接的“React Hooks + Redux - 用户注册和登录教程和示例”文章的底部，in the React Webpack Config section 它显示了他们如何配置 config.apiUrl 值以便可以使用它在他们的应用程序中。

---

使用 .env 文件配置 API url 的新示例

您可以使用带有create-react-app 的.env 文件为您的应用程序配置此类值。

这样做的好处是它是一种标准且易于理解的模式，它允许像这样轻松配置开发和生产变量。

在项目的根目录中创建一个.env 文件，以配置用于生产的 API 源：

    # .env
    REACT_APP_PROXY=http://my-production-domain-and-port:8080

然后创建一个.env.development 文件来配置你本地开发的API源：

    # .env.development
    REACT_APP_PROXY=http://localhost:8080

create-react-app 应该会自动将此文件及其变量加载到您的应用程序中（请参阅docs for details）。

然后你可以在你的应用程序中访问这个环境变量：

    // config.js
    // You can collect together any other environment variables here as well
    const apiUrl = process.env.REACT_APP_PROXY;

    export default {
        apiUrl
    }

    import config from './path-to/config';

    export function fetchTeams(team, conference) {
        return dispatch => {
            let url = `${config.apiUrl}/api/cbb/teams`;
            if (team) { url += '/team/' + team; }
            else if (conference) { url += '/conference/' + conference; }
            else { url += '/list'; }

            console.log('fetchTeams url: ', url);
            dispatch(fetchSportsDataBegin());
            return fetch(url)
                .then(handleErrors)
                .then(res => res.json())
                .then(json => {
                    dispatch(fetchSportsDataSuccess(json));
                    return json;
                })
                .catch(error => dispatch(fetchSportsDataError(error)));
        };
    }