__RequestVerificationToken 未使用 axios 0.17.1 和 MVC 3/4/5 正确发送答案

【问题标题】：__RequestVerificationToken not sent correctly with axios 0.17.1 and MVC 3/4/5__RequestVerificationToken 未使用 axios 0.17.1 和 MVC 3/4/5 正确发送
【发布时间】：2018-05-06 09:29:33
【问题描述】：

我从项目中删除了 jQuery 以支持 axios，但是当我尝试验证 __RequestVerificationToken 时，控制器响应：

所需的防伪表单字段“__RequestVerificationToken”不存在

我看到数据是以json格式发送的，并以jquery作为表单数据。

Controller有什么方法可以检测json格式还是需要先序列化数据再发送？

axios({
      url: '/api/controller/method',
      data: {
        __RequestVerificationToken,
        otherData
      },
      method: 'post'
    })

【问题讨论】：

有效负载平成一体 - 这就是原因。我现在正在解决这个问题。当我有解决方案时，我会发布它。
感谢@Ognyan Dimitrov，我发布了与我的团队一起找到的解决方案，希望对您有所帮助。

标签： jquery json asp.net-mvc axios antiforgerytoken

【解决方案1】：

将qs 添加到您的项目中（npm install qs --save）

在你的 .chtml 中：

<div id="token">@Html.AntiForgeryToken()</div>

在你的组件 vue.js 中：

一开始：

import qs from 'qs'
import axios from "axios"

在函数中：

let token = document.querySelector('token, input').getAttribute('value');   

axios.post( "/api/controller/method", qs.stringify({ '__RequestVerificationToken': token}));

【讨论】：

【解决方案2】：

我们为 axios 添加一个配置文件并添加一个插件"qs" 来对查询进行字符串化。

import qs from 'qs'
import axios from 'axios'
import fd from '../FormDataBuilder'

axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.paramsSerializer = p => qs.stringify(p, { allowDots: true })
axios.defaults.transformRequest = [d => typeof d === 'object' ? d.formdata ? fd(d) : qs.stringify(d, { allowDots: true }) : d]

export default axios

FormDataBuilder 是一个针对“formdata”表单的函数。

现在服务器可以正确接收令牌了。

【讨论】：

我已经使用 Vue.js、Axios 和 Asp.Net MVC 大约一周了。我不知道如何将 @HTML.AntiForgeryToken 从我的 Razor 页面传递到 Vue 应用程序，然后传递到 Axios 发布请求数据。作为菜鸟，上面说的意义不大，但我认为我的答案的根源就在某个地方。