如何在 REST API 上通过 axios 设置 POST 请求？答案

【问题标题】：How to set POST request via axios on REST API?如何在 REST API 上通过 axios 设置 POST 请求？
【发布时间】：2018-07-14 05:26:46
【问题描述】：

如何在 REST API 上通过 axios 设置 POST 请求？

Headers

我看到标题不正确，但我不明白，为什么？另外，我经常遇到这样一个事实，即 axios 的文档根本不起作用。

获取 GET 请求的示例，它可以工作： Dynamic host in axios

const configAxios = {
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
    'Access-Control-Allow-Origin': '*',
  },
};
const data = JSON.stringify({
  cardData: this.cardData.brand,
});
axios.post('api/products', {
  data,
},
  configAxios,
)
.then((req) => {
  this.data = req.data;
  console.log(req);
})
.catch((err) => {
  console.warn('error during http call', err);
});

这是获取主机 API 所必需的：

p.s.：这只能以这种方式工作。

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

axios 版本：例如：v0.16.2
环境：例如：node v8.9.4、chrome 64.0.3282.119、Ubuntu 16.04
Symfony 4.0.4
Vue.js 2.4.2
vue-axios 2.0.2

【问题讨论】：

axios 配置作为第三个参数传递，而不是数据对象中的字段。
@NickTucci 无论如何我都会得到Unauthorized header content-type
@NickTucci 我修复了代码。
是你的服务器还是 axios 返回了这个错误？
@NickTucci，服务器，他在等待必要的头条新闻，但据我所知，axios 不想提供它们。

标签： javascript symfony vue.js axios api-platform.com

【解决方案1】：

如果 API 和客户端位于不同的域名上，则需要正确配置 CORS 标头以允许客户端联系服务器。您还需要将授权标头列入白名单。

借助 API 平台和 Symfony，您可以使用 NelmioCorsBundle 轻松完成。如果你使用 Symfony 4/Flex，运行：

$ composer req cors

该软件包将自动安装并正确配置。 `Content-Type] 甚至会是whitelisted。

【讨论】：