Блог

Главная - Вопросы по программированию - Политика Nodejs React CORS: заголовок «Управление доступом-Разрешить-Происхождение» отсутствует на запрошенном ресурсе

Политика Nodejs React CORS: заголовок «Управление доступом-Разрешить-Происхождение» отсутствует на запрошенном ресурсе

#javascript #node.js #api #express #cors

Вопрос:

у меня есть эта ошибка:

Доступ к XMLHttpRequest по адресу ‘http://localhost:3000/api/users/uploadAvatar» от происхождения «http://localhost:8081» заблокирован политикой CORS: на запрошенном ресурсе отсутствует заголовок «Управление доступом-Разрешить-Происхождение».

когда мои параметры cors сервера:

 app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:8081");
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  if (req.method === 'OPTIONS') {
      res.header("Access-Control-Allow-Methods", "PUT, POST, DELETE, GET");
      return res.status(200).json({});
  } 
  next();
});

И с внешнего интерфейса я вызываю сервер с этими опциями:

 var data = {
      image: imageCrop.current.getImage().toDataURL(),
      target: targetImage,
    }
    var config = {
      onUploadProgress: function (progressEvent) {
        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
        setUploadPercent(percentCompleted)
      },
      headers: authHeader(),
      withCredentials: true,
    }
    axios.post('uploadAvatar', data ,config).then((res) => {
      setUploadPercent(0);
      if (res.status === 200) {
        cogoToast.success("upload is completed")
        setUploadModal(false);
        upDateuserInfo();
      }
    }).catch((err) => {
      setUploadPercent(0);
      setUploadModal(false);
    });

Служба заголовка аутентификации предоставляется с:

 export default function authHeader() {
  const user = JSON.parse(localStorage.getItem("user"));

  if (user amp;amp; user.accessToken) {
    // For Spring Boot back-end
    // return { Authorization: "Bearer "   user.accessToken };
    // for Node.js Express back-end
    return { Authorization: "Bearer "   user.accessToken};
  } else {
    return {};
  }
}

Что я делаю не так?? пожалуйста, помогите мне!!! p.s. вызов работает, если я удаляю параметр изображения, и я не могу установить «Управление доступом-Разрешить-Происхождение»,»*», потому что это даст мне ошибку при использовании подстановочного знака.

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

1. По соображениям безопасности интерфейсным веб-страницам не разрешается отправлять запросы на серверы, отличные от того, с которого они исходят. Это называется CORS. Насколько я понимаю, вы делаете запрос с начальной страницы, предоставленной localhost:8081, на localhost:3000 (которые являются двумя отдельными серверами в соответствии с вашим браузером), поэтому это вступает в игру. Вместо этого вам следует сделать запрос с вашего интерфейса на его серверную часть на локальном хосте:8081, затем попросите серверную часть localhost:8081 отправить запрос на локальный хост:3000.

2. @fin444 спасибо за ваш ответ, но как я могу переадресовывать звонки с внутреннего локального хоста:8081 на локальный хост:3000 с помощью React?

3. Можете ли вы загрузить свой проект в такое место, как Github, и связать его? У меня возникли проблемы с полным пониманием того, как взаимодействуют ваш клиент и сервер.

4. спасибо @fin444 за ваше предложение, я сделал это, поставив прокси на сторону реакции! Большое спасибо!

Ответ №1:

я решил поместить эту строку в package.json:

 "proxy": "http://localhost:3000/api/"
Метки: