Вызов API получает ошибку CORS в ReactJS, но получает ответ в узле и почтальоне

Question

Я пытаюсь вызвать API для популярных серверов, таких как OwnCloud, Openfire и Ejabberd, которые установлены на моем локальном сервере. Я создаю сайт ReactJS. Первоначально я использовал метод fetch() для доступа к API. Но в результате я получаю ошибку CORS.

Access to fetch at 'http://x.x.x.x:8088/api/contacts/3000@x.x.x.x' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.

Я проверил те же API с помощью Postman и успешно получил ответ. Затем я протестировал его с помощью приведенного ниже кода узла с помощью командной строки и получил ответ API в командной строке.

var http = require("http");

var options = {
  "method": "GET",
  "hostname": "x.x.x.x",
  "port": "8088",
  "path": "/api/contacts/3000@x.x.x.x",
  "headers": {
    "cache-control": "no-cache",
    "postman-token": "e5a6f2bb-abc9-8ce7-f237-342ab53ab9d6"
  }
};

var req = http.request(options, function (res) {
  var chunks = [];

  res.on("data", function (chunk) {
    chunks.push(chunk);
  });

  res.on("end", function () {
    var body = Buffer.concat(chunks);
    console.log(body.toString());
  });
});

req.end();

Я внедрил тот же код узла в свой код ReactJS и снова получил ту же ошибку CORS.

Я добавил следующие заголовки в заголовок метода fetch() и получил ту же ошибку CORS.

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
'Access-Control-Allow-Headers': 'origin, content-type, accept, authorization',

Я добавил mode: "cors" в метод fetch(). Но все та же ошибка.

Не могли бы вы предоставить решение, чтобы избежать этой *CORS* проблемы?

Answer 1

Вы должны создать локальный прокси для вызовов API.

Здесь прокси использует шаблон url для сопоставления с вызовами API и перенаправления их на соответствующий сервер.

Попробуйте следующее:

• Установить http-proxy-middleware

  npm install http-proxy-middleware --save
  

• create src / setupProxy.js

  const proxy = require('http-proxy-middleware');
  
  module.exports = function(app) {
  
     app.use(proxy('/api', { target: 'http://localhost:8088/' }));
  
  };
  

• Затем запустите ваш локальный сервер разработки