Как преодолеть проблемы CORS с помощью Redux React Express и узла?

Question

У меня есть приложение React, которое использует React Router и Redux в качестве менеджера состояния. Серверная часть приложения использует Express и Node.

Я делаю вызовы API для внешней службы. У меня нет возможности включить CORS на внешнюю службу. Поэтому мне нужно использовать серверную часть моего приложения, чтобы вызовы внешней службы удалили браузер из уравнения и устранили любую ошибку CORS.

Я могу получить мои данные из службы на стороне сервера успешно. Я хотел бы знать, можно ли делиться хранилищем Redux между клиентом и сервером с каким-то промежуточным программным обеспечением (ищем примеры/ресурсы).

Цель:

1) Обрабатывать событие щелчка на клиенте

2) имеют, что событие вызова на стороне сервера маршрут к внешнему API (не знаю, как это сделать)

3) Затем сервер обрабатывает этот маршрут, делает запрос, и посылает ответ клиенту (через общий реагировать магазин - не уверен, если это возможно)

4) магазин получает новое состояние,d затем отправляет компоненты на стороне клиента, а обновления пользовательского интерфейса

Есть ли примеры/учебные пособия по этому вопросу? Не ищете начальную страницу, представленную сервером, а руководства, которые информируют о том, как можно выполнить описанные выше 4 шага.

Answer 1

Спасибо за предложения.

Оказалось, что я был серьезно обеспокоен решением проблемы. Все, что мне действительно нужно, это возможность запуска функции на стороне сервера (получение ресурсов из внешнего API) из клиентского события (компонент загрузки). Подобно тому, как отправить форму, есть действие, которое запускает функцию на стороне сервера.

В моем компоненте:

componentDidMount() { 
    const product_api_results = productApi.getProductItems() 
    console.log('product_api_results in CART Component: ', product_api_results) 
    /* now I have results and can put it in the Redux Store via action to reducer for other components to work with on client */ 
    } 

В productAPI.getProductItems(), что компонент вызывает:

export function getProductItems() { 
    return axios.get('/api/get-products') // triggers a server side route 
    .then(function (response) { 
     console.log('client side response: ', response) 
     return response 
    }) 
} 

Экспресс server.js файл, сервер будет видеть этот адрес, а затем получить правильные данные. shopify.get() находится в модуле shopify-node-api: