После развертывания получение сообщения об ошибке 404 axios

В настоящее время я пытаюсь получить данные axios из node.js. и я могу получить результат по локальному URL-адресу, однако после того, как я создам его и разверну, метод публикации получает ошибку 404. поэтому я попытался использовать метод get, чтобы проверить его. он получает HTML-результат реакции. это совершенно нормально, когда я делаю это на местном уровне. но только это не работает, когда я создаю и развертываю.

Я предположил, что это проблема с прокси, поэтому я установил библиотеку http-proxy-middleware и Я пытаюсь настроить setupProxy.js в своей папке реагирования.

это пример из "https://create-react-app.dev/docs/proxying-api-requests-in-development/" После развертывания получение сообщения об ошибке 404 axios

но это все еще не работает.

Я хочу знать, что может сделать эту проблему.

//node.js 

app.get("/test", (req, res) => {
  res.send({ hello: "Hello world" });
});


const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, "dist")));
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
});
//react 

const getTest = () => {
    axios
      .get(`${backend}/test`)
      .then(res => {
        console.info(res.data);
      })
      .catch(err => console.info(err));
  };

Какова ценность backend?

Phil 07.04.2022 03:57

это домен

blueblue 07.04.2022 04:02

Ваше приложение React встроено в папку dist?

Phil 07.04.2022 04:09

да, мое приложение для реагирования встроено в dist!

blueblue 07.04.2022 04:17

Я использую вите,

blueblue 07.04.2022 04:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
5
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

конфигурация прокси применяется только к серверу webpack-dev-server, который вы используете при разработке приложения React...

Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production.

Я бы предложил просто использовать более простую версию, добавив это в свой package.json

"proxy": "http://localhost:5000",

Вы также должны убедиться, что ваше приложение Express настроено для обработки запросов API как в режиме разработки, так и в рабочем режиме. Для этого я бы рекомендовал использовать те же маршруты, что и в запросах от внешнего интерфейса...

app.get("/api/test", (req, res) => {
  res.send({ hello: "Hello world" });
});

// or even better

app.use("/api", myApiRouter);

Теперь ваше приложение React может отправлять запросы /api/test как в режиме разработки, так и в режиме производства.

axios.get("/api/test").then(({ data }) => console.info(data));

В режиме разработки конфигурация прокси будет перенаправлять запросы в ваше приложение Express.

В рабочем режиме ваше приложение Express будет обслуживать встроенное приложение React через express.static(), поэтому они будут в одном домене.

Другие вопросы по теме