Блог

Главная - Вопросы по программированию - Проблема с прокси-сервером React CRA

Проблема с прокси-сервером React CRA

#reactjs #proxy #fetch #create-react-app

#reactjs #прокси #выборка #создать-реагировать-приложение

Вопрос:

Я поместил строку «прокси»: ‘http://192.168.1.36:4000 ‘который соответствует IP-адресу и порту моего expressjs API, но когда я выполняю выборку для получения информации на моем сервере, я получаю сообщение об ошибке типа:> POST http: // localhost: 3000 / api / users / login 400 (BadЗапрос). Из того, что я понял из ошибки, выборка использует порт моего приложения react, а не порт моего экспресс-API. Порт 3000 не принадлежит моему API.

 {
  "name": "portfolio",
  "version": "1.0.0",
  "private": true,
  "proxy": "http://192.168.1.36:4000", // This line
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  }, 

 fetch('/api/users/login', {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                email: email,
                password: password
            })
        })
        .then((res) => res.json())
        .then((res) => {
            if(!res.error) {
                localStorage.setItem('auth', res.token);
                dispatch({ type: LOGIN, user: res.user, token: res.token });
            } else {
                dispatch({ type: ERROR, message: res.error });
            }
        })

Ответ №1:

Вот как я решил ее с помощью React CRA:

  1. Удалите http://localhost:3000 из вашего POST-вызова REST API, что означает, что вы должны просто вызвать POST /api/users/login
  2. Добавьте прокси oneliner в package.json : { ..., "proxy": "http://localhost:4000/"}

Этого должно быть достаточно, нет необходимости использовать расширения CORS в браузере с прокси.