Не удается устранить ошибку cors в приложении react и node

#javascript #node.js #reactjs

Вопрос:

Я только что развернул приложение react / express в Heroku, которое изначально работало пару минут, но затем возникла страшная ошибка cors, которую я, похоже, никогда не смогу исправить. Я перепробовал все остальное, предложенное в других сообщениях, но, похоже, у меня ничего не работает.

Я попытался добавить прокси-сервер в свое приложение react с:

  "proxy": "http://127.0.0.1:4000", (and also trying) ->
 "proxy": "http://localhost:4000",

Это не сработало, поэтому я попытался добавить пакет cors в node, который тоже не сработал. Это сводит меня с ума, и я не знаю, что еще я могу попробовать.

 const app = require("./app");
const cors = require("cors");

app.use(
  cors({
    allowedHeaders: ["authorization", "Content-Type"], // you can change the headers
    exposedHeaders: ["authorization"], // you can change the headers
    origin: "*",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false
  });
);
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`Listening on ${port}`);
});

Я использую axios для запросов, например:

 const allMoviesData = await axios.get("/movies?limit=12");

В Chrome я получаю:

 
GET http://localhost:4000/movies?limit=12 net::ERR_CONNECTION_REFUSED
(anonymous) @ bundle.js:31
bundle.js:31 Uncaught (in promise) Error: Network Error
    at e.exports (bundle.js:31)
    at XMLHttpRequest.d.onerror (bundle.js:31)

В firefox я получаю:

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/movies?limit=12amp;searchBy=genresamp;filter=adventure.

Uncaught (in promise) Error: Network Error
    exports http://localhost:3000/bundle.js:31
    onerror http://localhost:3000/bundle.js:31

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/movies?limit=12. (Reason: CORS request did not succeed).

Любые другие предложения будут оценены.

1. когда приложение развертывается в heroku, изменяется ли URL-адрес, т.Е. Вместо запроса, поступающего от heroku, он поступает с URL-адреса (или ip: port) развернутого компьютера? размещает ли развертывание heroku как сервер Express, так и клиент react ?

2. итак, я только что заметил, что когда я запускаю приложение локально, а затем перехожу к развернутому приложению, ошибка cors исчезает, и я получаю данные. Если я остановлю локальный сервер, хотя развернутое приложение снова получит ошибку cors, и я не смогу получить данные. Это работает локально, но это должно быть то, как heroku развертывает приложение или, возможно, как его настроить в моем приложении.

3. Ошибка… Вероятно, это не ваша проблема, но этой дополнительной точки с запятой после cors вызова вашей функции не должно быть.

Ответ №1:

Проверьте заголовки запроса и ответа.

Синеватые части должны быть одинаковыми.

Если они не совпадают для вас, это означает, что все, что вы делаете, работает не так, как должно быть.