получить (url) в приставке. js используя неправильный порт

Question

У меня есть приложение MERN, которое использует комбинацию:

1. Async / Await с Ax ios и
2. Redux

для управлять потоком данных во всем приложении. Redux в основном используется для входа в систему + авторизации (по этим правилам) . Несколько других таблиц, которые совместно используются на многих страницах в моем приложении, выбираются с помощью redux и доступны через reduxState. Однако, поскольку большинство маршрутов в моем приложении MERN не требуют общего состояния, я просто использую ax ios для получения большей части данных из моей базы данных mon go.

В настоящее время у меня проблема только с выборками из-за избыточности, как для входа в систему / авторизации, так и для всех других таблиц, извлекаемых через избыточную передачу. В моей консоли я получаю следующие сообщения об ошибках приведения:

API узла для приложения обслуживается через порт 8080, и если я скопирую этот URL, изменим порт и вставлю http://localhost:8080/api/cbb/teams/list непосредственно в мой браузер chrome, он вернет данные, как я и ожидал. Так что я считаю, что есть проблема с портом 3000 / 8080. Порт 3000 - это место, где обслуживается клиентская часть приложения (я верю), и я понимаю, почему redux выполняет запрос GET для порта: 3000.

Мой вопрос заключается в том, что я могу сделать, чтобы решить / отладить это, чтобы мои выборки из редукса снова заработали? Я предполагаю, что мне просто нужно «указать» выборки из резервной копии на правильный порт, но я не уверен, как это сделать ... Любые мысли о том, почему это может происходить, будут высоко оценены.

Спасибо,

Также, если это будет полезно, я могу поделиться настройкой нескольких других файлов:

• store. js
• groups-action . js
• команд-редукторов. js
• любых других соответствующих таблиц ...

Редактировать 1 : вдоль строки этого вопроса , мой файл client (со всем моим внешним кодом) находится внутри каталога для моего API узла. В моем файле client/package.json есть строка с "proxy": "http://localhost:8080",

Edit 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

Вы столкнулись с той же проблемой, что и связанный вопрос, и тот же ответ решит проблему.

Если вы используете свойство package.json proxy для сконфигурируйте источник API, тогда вам нужно будет найти способ вставить это значение в код приложения и использовать его для настройки генерируемых URL-адресов выборки.

Например, в нижней части «Реагировать» Связанная с вами статья Hooks + Redux - Учебник и пример регистрации и входа пользователя, в разделе конфигурации React Webpack , показывает, как они настраивают значение config.apiUrl, чтобы его можно было использовать в их приложении.

---

Новый пример использования файла .env для настройки URL-адреса API

Файл .env можно использовать с create-реакции-app для настройки такого рода значения для вашего приложения.

Преимущество этого в том, что это стандартный и понятный шаблон, который позволяет легко настраивать переменные разработки и производства, такие как s.

Создайте файл .env в root вашего проекта для настройки источника API для производства:

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

Затем создайте файл .env.development для настройки API origin для вашей локальной разработки:

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

create-react-app должен автоматически загрузить этот файл и его переменные в ваше приложение (подробности смотрите в документах ).

Тогда вы можете получить доступ к этой переменной среды внутри вашего приложения:

    // 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)));
        };
    }

Answer 2

Это должен быть ваш выбор на клиенте

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 клиента получит его хост. То же, что и ссылки в html, которые должны начинаться с http, например, если вы сделаете ссылку, www.google.com отправит вас на domain.com/www.google.com