Вызов Axios блокируется из-за ошибки CORS

#reactjs #express #cors

Вопрос:

У меня есть приложение react с рендерингом на стороне сервера с использованием экспресс-сервера . Я хочу сделать запрос на публикацию с помощью axios, но он блокируется ошибкой CORS : «Доступ к XMLHttpRequest по адресу ‘https://xyz/abc» от происхождения «http://localhost:4249» заблокирован политикой CORS: Ответ на предполетный запрос не проходит проверку контроля доступа: На запрошенном ресурсе отсутствует заголовок «Доступ-Контроль-Разрешить-Происхождение».

Я попытался после добавления заголовков allow origin и модуля cors в вызов сервера, но это не сработало

     import cors from "cors";
const server = express();
server.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});
server.use(express.static("dist"));
server.use(cors());

Вот запрос axios :

 const headers = {
    Accept: "application/json",
    "x-ms-version": "2019-07-11",
    Authorization: token,
    "x-ms-date": date,
    "x-ms-documentdb-isquery": true,
    "Content-Type": "application/query json",
    "x-ms-documentdb-query-enablecrosspartition": "true",
    "cache-control": "no-cache",
    "Access-Control-Allow-Origin": "*",
  };

  useEffect(() => {
    axios
      .post(
        "https://xyz/abc",
        data,
        {
          headers: headers,
        }
      )
      .then(function (response) {
        setres(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

Конфигурация веб-пакета:

 module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /.(sass|css|scss)$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Ответ №1:

Я сталкивался с этой проблемой раньше, и это именно то, что я сделал:

app.js (серверная часть)

 server.use(cors({
  origin: '<YOUR_FRONTEND_URL_PATH>',
  methods: 'GET,HEAD,POST,PUT,DELETE',
  preflightContinue: false,
  credentials: true
}));

запрос axios:

 const resp = await axios.post(
     apiUrl,
     params,
     {
        withCredentials: true,
        timeout: 10000
     }
);