Axios: Добавление заголовков в метод axios.post

Это не ошибка, все работает как положено.
Вы создаете предварительный запрос (не простой), как указано в документах https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS , потому что вы добавляете заголовок и тип содержимого, которые заставляет это.
Таким образом, в этом режиме запрос OPTIONS выдается перед вашим основным запросом, вы должны убедиться, что сервер может управлять запросом OPTIONS, чтобы он работал.

Изменить: мне пришлось добавить авторизацию в разрешенные заголовки в моем фильтре CORS.

@jffernandez

У меня такая же проблема. Когда я пропускаю заголовок Auth, я получаю запрос параметров, который возвращает POST, OPTIONS, а затем POST, который возвращает 403, потому что отсутствует заголовок авторизации (ожидается).

Когда я добавляю заголовок, я просто получаю запрос опции, и он никогда не делает POST.

post("http://localhost:8080/foo", foo)

против

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

Это проблема CORS, а не аксиом. Пожалуйста, взгляните на ссылку, предоставленную @jffernandez , или найдите похожие проблемы здесь.

Да, это о CORS. Но если вы похожи на меня, то вы, вероятно, забыли добавить Content-Type, авторизованный на вашем сервере API.

AllowedHeaders : Content-Type и X-Requested-With
И авторизация в вашем случае.

И, конечно же, не забудьте также разрешить метод OPTIONS.

axios({ method: 'POST', url: 'you http api here', headers: {autorizacion: localStorage.token}, data: { user: 'name' } })

Или, если вы хотите избавиться от этой ошибки CORS, вы можете установить пакет corsproxy в свой узел. Это поможет вам с ошибками перекрестного происхождения. Вы можете перейти по ссылке ниже:

https://github.com/gr2m/CORS-прокси

````
Вход = () => {
console.log('нажат вход')
пусть данные = JSON.stringify({
пароль: this.state.password,
имя пользователя: this.state.email
})

axios.post('url', data, {
    headers: {
        'Content-Type': 'application/json',
    }
}
)

}
```

Решите это, добавив этот заголовок

   axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

Вот как мне пришлось отформатировать мой POST-запрос

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

чтобы решить ошибку cors, просто запустите эту команду npm i --save cors, а затем в вашем app.js импортируйте, как это

вар корс = требуется ('корс');
затем вызывайте так в том же файле, в моем случае мой корневой файл - app.js
app.use (корс ());

это решит вашу проблему с cors

@mirzaumersaleem Я не использую cors, но пытаюсь отправить сообщение в свой бэкенд, используя axios, и получаю 400 Bad request.

fetch можно делать с cors(с бэкендом проблем нет), а вот с axios иногда не получается.

чтобы решить ошибку cors, просто запустите эту команду npm i --save cors, а затем в вашем app.js импортируйте, как это

вар корс = требуется ('корс');
затем вызывайте так в том же файле, в моем случае мой корневой файл - app.js
app.use (корс ());

это решит вашу проблему с cors

В моих путешествиях CORS нужно делать на сервере ( .net/java/node/php и т.д..)

Изменить: мне пришлось добавить авторизацию в разрешенные заголовки в моем фильтре CORS.

@jffernandez

У меня такая же проблема. Когда я пропускаю заголовок Auth, я получаю запрос параметров, который возвращает POST, OPTIONS, а затем POST, который возвращает 403, потому что отсутствует заголовок авторизации (ожидается).

Когда я добавляю заголовок, я просто получаю запрос опции, и он никогда не делает POST.

post("http://localhost:8080/foo", foo)

против

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

быстрый ответ заключается в том, что первый аргумент после URL-адреса и второй часто неуместны, т.е. axios(url, data, config), поэтому, если вы опустите часть конфигурации или переключите данные и конфигурацию, вы, вероятно, получите неожиданные результаты, в общем, работа с локальным хостом должна быть вообще без вопросов.

В общем, не очень читабельно

axios.request(конфигурация)
axios.get(url[, конфигурация])
axios.delete (url [, конфигурация])
axios.head(url[, конфигурация])
axios.options(url[, конфигурация])
axios.post (url [, данные [, конфигурация]])
axios.put (url [, данные [, конфигурация]])
axios.patch (url [, данные [, конфигурация]])

Я ожидал, что все API согласованы и имеют
1) URL как первый параметр,
2) config вторым параметром (необязательно),
3) данные (необязательно)

Потому что это то, чего ожидают пользователи, несмотря на это, axios создала огромную проблему из-за этого крошечного API-решения, так что почти каждый попал туда хотя бы раз в жизни.

Работа для меня:

`
константные заголовки = {
«Тип контента»: «приложение/json»,
«Авторизация»: «JWT fefege...»
}

axios.post(Helper.getUserAPI(), данные, {
заголовки: заголовки
})
.тог((ответ) => {
отправлять({
тип: FOUND_USER,
данные: ответ.данные[0]
})
})
.catch((ошибка) => {
отправлять({
тип: ERROR_FINDING_USER
})
})
`

Столкнувшись с той же проблемой здесь с jquery, запрос выполнен успешно, но когда я отправляю запрос с axios, возникает проблема с cors.
Мой запрос--

      .post('https://test.pi.com/j_spring_security_check', {

        withCredentials: true,
        crossorigin: true,
        headers: {
          common:{
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'WithCredentials': true,
            'Access-Control-Allow-Origin': '*'
        }
      },
        data: JSON.stringify({
          j_username: email,
          j_password: password
        }),

        // proxy: {
        //   '/j_spring_security_check/*': 'https://devtest.pvai.com/j_spring_security_check',
        // }
      })

это заголовки ответов с сервера, и разрешено происхождение моего локального хоста, разрешены заголовки, которые я отправляю, и методы.

access-control-allow-credentials: true
access-control-allow-headers: Authorization, X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept
access-control-allow-methods: POST, GET, OPTIONS
access-control-allow-origin: http://localhost:5000
access-control-expose-headers: Authorization
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
date: Wed, 11 Dec 2019 04:53:25 GMT
expires: 0
location: /authFailure
pragma: no-cache
status: 302
strict-transport-security: max-age=31536000 ; includeSubDomains
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

Вот как мне пришлось отформатировать мой POST-запрос

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

Спасибо, спас мой день! Работал на меня