axios 时 post 请求方法传参无法发送至后台报错如下

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

vue 框架推荐使用 axios 插件发送数据,使用 axios 插件结合 qs 插件实现 post 传参不报错。

  • 安装插件
npm install --save axios
npm install --save qs
  • 引入插件
import axios from 'axios'
import qs from 'qs'
  • 在 methods 中使用
methods: {
getData() {
axios.post(url, // url 以自己的地址为准
qs.stringify({
key: '' // 值按照需求传入
})
).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error)
})
}
}

按照上述方法可解决 axios 使用 post 请求传参问题

正确的跨域做法应该使用 jsonp

vue 使用 axios 时 post 请求方法传参无法发送至后台的更多相关文章

  1. vue.js - axios Get、Post方法传参给 .net core webapi。

    一:axios中是 Get请求: 1:在vue项目中通过params属性携带数据: let _self = this; axios({ method:'get', url:'http://localh ...

  2. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  3. EasyUI queryParams属性 在请求远程数据同时给action方法传参

    http://www.cnblogs.com/iack/p/3530500.html?utm_source=tuicool EasyUI queryParams属性 在请求远程数据同时给action方 ...

  4. 再谈Java方法传参那些事

    把一个变量带进一个方法,该方法执行结束后,它的值有时会改变,有时不会改变.一开始会觉得--“好神奇呀”.当我们了解java内存分析的知识后,一切都是那么简单明了了--“哦,这么回事呀”.但是今天的上机 ...

  5. java的方法传参,最容易混淆的问题!!!

    参数传递 参数传递,可以理解当我们要调用一个方法时,我们会把指定的数值,传递给方法中的参数,这样方法中的参数就拥有了这个指定的值,可以使用该值,在方法中运算了.这种传递方式,我们称为参数传递. 在这里 ...

  6. SpringBoot 2.x (2):请求和传参

    其实请求和传参这些知识属于SpringMVC 不过这也属于必须掌握的知识,巩固基础吧 GET请求: 以第一篇文章自动的方式创建SpringBoot项目: 然后新建Controller: package ...

  7. axios&spring前后端分离传参规范总结

    前后端分离开发的场景下,开发人员的工作内容更加专注与专业,但是也产生了一些额外的沟通成本.比如:本文中为大家说明的前后端参数传递与接受方法.本文主要是面对前端使用axios,后端使用Spring进行参 ...

  8. MyBatis dao层 方法传参

    MyBatis dao层 方法传参有三种方法. 1. 以下标的方法获取参数. <update id="insertSuccessKilled">       INSER ...

  9. javascript 字符串方法传参

    javascript 字符串方法传参由于嵌套的单引号,双引号过多.有点混乱.. 正确方法如下: '   <td align="left"><input type= ...

随机推荐

  1. poj2773(欧基里德算法 或 二分+容斥)

    题目链接:https://vjudge.net/problem/POJ-2773 题意:给定m,k,求与m互质的第k个数. 思路一:利用gcd(a,b)=gcd(b*t+a,b)知道,与m互质的数是以 ...

  2. 干货 | 深入分析 string.intern() 方法

    首先我们来看一段代码: public class InternTest {      public static void main(String[] args) {     String str1 ...

  3. A Dangerous Maze (期望值)

    https://vjudge.net/problem/LightOJ-1027?tdsourcetag=s_pctim_aiomsg [被满为姐姐碾压 降智打击题]

  4. 洛谷 P2384 最短路 题解

    题面 这道题需要用到一个神奇的知识点:log(n*m)=log(n)+log(m): 所以对所有边权取个log,然后算log的最短路的同时维护乘积即可 #include <bits/stdc++ ...

  5. 字符集详解 ASCII码、Unicode、UTF-8 (转)

    认识字符集 对于计算机而言,它仅认识两个0和1,不管是在内存中还是外部存储设备上,我们所看到的文字.图片.视频等等“数据”在计算机中都是已二进制形式存在的.不同字符对应二进制数的规则,就是字符的编码. ...

  6. Hdu 4738【tanjan求无向图的桥】割边判定定理 dfn[x] < low[y]

    题目: 曹操在长江上建立了一些点,点之间有一些边连着.如果这些点构成的无向图变成了连通图,那么曹操就无敌了.刘备为了防止曹操变得无敌,就打算去摧毁连接曹操的点的桥.但是诸葛亮把所有炸弹都带走了,只留下 ...

  7. Android 开源项目及库汇总(2)

    Android 开源项目及库汇总(2) ListenToCode 2.7 2018.10.10 15:43 字数 8527 阅读 1001评论 0喜欢 29 地图 百度地图– Android百度地图 ...

  8. oracle中的多表查询和子查询以及一些注意事项

    多表查询就是使用两张表及其以上的查询.首先需要知道几个名词,笛卡尔积,内连接,外连接,子查询. 1)笛卡尔积 所谓笛卡尔积其实就是两张表数据的条数相乘得到的最后结果,例如表1有10条数据,表2有4条数 ...

  9. vue的v-model指令原理分析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Vue的双向数据绑定的原理

    Vue数据双向绑定的原理就是采用数据劫持结合发布者-订阅者模式,通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监 ...