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

时间:2018-02-04 02:55:16

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

如何通过REST API上的axios设置POST请求?

Headers

我看到得到不正确的标题,但我不明白,为什么? 此外,我经常发现axios的文档根本不起作用。

示例获取GET请求,它的工作原理: Dynamic host in axios

{ "_id" : ObjectId("5a766ec765583a0f90bc0edf"), "descripcion" : "JAVA + JPA", "horas" : 200, "alumnos" : [ { "_id" : ObjectId("000000000000000000000000"), "name" : "Catalina Castillo", "age" : 22 }, { "_id" : ObjectId("000000000000000000000000"), "name" : "Marcia Pardo", "age" : 45 }, { "_id" : ObjectId("000000000000000000000000"), "name" : "Will Smith", "age" : 24 } ] }

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

p.s。:这只会以这种方式起作用。

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);
});

  • axios version:例如: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

1 个答案:

答案 0 :(得分:0)

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

使用API​​平台和Symfony,您可以使用NelmioCorsBundle轻松完成。如果您使用Symfony 4 / Flex,请运行:

PrimeFaces.onPost();

将自动安装并正确配置包。 “内容类型”甚至可以是whitelisted