Блог

Главная - Вопросы по программированию - Прокси-запросы в приложении create-react-app

Прокси-запросы в приложении create-react-app

#reactjs #proxy #create-react-app

Вопрос:

Я искал повсюду, чтобы попытаться понять, почему это не работает. У меня есть два приложения, клиент и сервер. Я хотел бы перенаправлять запросы клиентов на сервер. У меня есть маршрут, который называется /api/repositories . У меня не может быть прокси-сервера в файле package.json, потому что он также должен работать в рабочей среде.

Это проект создания приложения для реагирования. Вот важные файлы.

setupProxy.js 

 const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = (app) => {
  app.use(
    createProxyMiddleware("/api", {
      target: "http://my.server.com",
      changeOrigin: true,
      onProxyReq: (proxyReq) => {
        console.log("logged");
        if (proxyReq.getHeader("origin")) {
          proxyReq.setHeader("origin", "http://my.server.com");
        }
      },
    })
  );
};

И я использую его в функциональном компоненте React, называемом панелью поиска, как таковой:

Searchbar.js 

 import axios from "axios"

async function getRepos() {
  const response = await axios({
    method: "GET",
    url: "/api/repositories",
  });

  return response.data;
}

function Searchbar() {
  const [repos, setRepos] = useState([]);

  // Get the repos on load
  useEffect(async () => {
    setRepos(await getRepos());
  }, []);

  return (
    <div>
      {repos.map((repo) => <p>{repo}<p>)}
    </div>
  );

}

Однако, когда я запускаю npm run start и запускаю сервер разработки, все мои запросы API будут http://localhost:3000/api/repositories выполняться , что, очевидно, возвращает ошибку 404. Что я делаю не так?

Комментарии:

1. Можете ли вы попробовать это: использовать прокси-сервер React, чтобы опередить CORS и использовать HTTPS для вызовов API и использовать шлюз API в производстве?

2. Я не могу добавить прокси-сервер в свой package.json файл, так как это повлияет на него только в режиме разработки, и он мне нужен для работы в рабочей среде. Я развертываю это с помощью Heroku, что нарушает сборку, если в ней остался прокси package.json -сервер .

3. Что ломается в Героку? Вы вообще не должны использовать сервер разработки в производстве.

4. Когда я развертываю этот проект на Heroku, у меня есть файл Procfile, установленный как: web: npm run start . Он строится правильно, но я получаю HTML-страницу, на которой просто написано «Недопустимые заголовки хоста», когда я посещаю страницу, на которой я развернут. Интернет говорит мне, что это означает, что я оставил свойство прокси в своем package.json файле, и когда я удаляю его, он развертывается и отображается правильно.

Метки: