Axios: 将标题添加到 axios.post 方法

这不是错误，它按预期工作。
您正在生成一个预检请求（不是一个简单的请求），如文档https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS中所述，因为您正在添加一个标头和一个内容类型迫使这一点。
因此，在这种模式下，OPTIONS 请求在您的主请求之前发出，您必须确保服务器可以管理 OPTIONS 请求才能使其工作。

编辑：我必须在我的 CORS 过滤器中为允许的标头添加授权

@jffernandez

我有同样的问题。 当我省略 Auth 标头时，我收到一个返回 POST、OPTIONS 的 Options 请求，然后是返回 403 的 POST，因为它缺少 Authorization 标头（预期）。

当我添加标题时，我只收到选项请求，它永远不会发出 POST。

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

对比

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

这是一个 CORS 问题，而不是在 axios 中。 请查看@jffernandez提供的链接或在此处查找类似问题。

是的，它是关于 CORS 的。 但是如果你像我一样，那么你可能忘记在你的 api 服务器中添加 Content-Type 授权。

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-Proxy

````
登录 = () => {
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 中像这样导入

var cors = require('cors');
然后在我的情况下在同一个文件中这样调用我的根文件是 app.js
app.use(cors());

它会解决你的cors问题

@mirzaumersaleem我没有使用 cors，但我正在尝试使用 axios 发布到我的后端，我收到了 400 Bad request

fetch可以用cors（后端没有问题），但是用axios，有时会失败。

要解决 cors 错误，只需运行此命令 npm i --save cors 然后在您的 app.js 中像这样导入

var cors = require('cors');
然后在我的情况下在同一个文件中这样调用我的根文件是 app.js
app.use(cors());

它会解决你的cors问题

在我的旅行中，CORS 需要在服务器上完成（.net /java/node/php 等）

编辑：我必须在我的 CORS 过滤器中为允许的标头添加授权

@jffernandez

我有同样的问题。 当我省略 Auth 标头时，我收到一个返回 POST、OPTIONS 的 Options 请求，然后是返回 403 的 POST，因为它缺少 Authorization 标头（预期）。

当我添加标题时，我只收到选项请求，它永远不会发出 POST。

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

对比

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

快速回答是 url 之后的第一个参数和第二个参数经常放错位置，即 axios(url, data, config)，所以如果你省略配置部分或切换数据和配置，你可能会得到意想不到的结果，一般来说，使用 localhost 应该是完全没有任何问题。

一般来说，它不是很可读

axios.request（配置）
axios.get(url[, 配置])
axios.delete(url[, 配置])
axios.head(url[, 配置])
axios.options(url[, 配置])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

我希望所有 api 都是一致的，并且有
1) url 作为第一个参数，
2）配置为第二个参数（可选），
3）数据（可选）

因为这是用户所期望的，尽管如此，axios 从这个小小的 api 决定中制造了一个巨大的问题，因此几乎每个人一生中至少被困在那里一次。

为我工作：

`
常量头 = {
'内容类型'：'应用程序/json'，
'授权'：'JWT fege ...'
}

axios.post（Helper.getUserAPI（），数据，{
标头：标头
})
.then((响应) => {
派遣（{
类型：FOUND_USER，
数据：response.data[0]
})
})
.catch((错误) => {
派遣（{
类型：ERROR_FINDING_USER
})
})
`

在这里遇到与 jquery 相同的问题，请求是成功的，但是当我发送带有 axios 的 req 得到 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);
    })

谢谢，拯救了我的一天！ 为我工作