VUE axios发送跨域请求需要注意的问题


Posted in Javascript onJuly 06, 2017

在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求

关于跨域

跨域的概念这些就不说了,百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛。

不多说,直接上代码~~~~

同理,跨域的解决方案为cros。服务器 PHP端代码如下(laravel 中间件进行处理):

public function handle($request, Closure $next)
  {

    if ($request->isMethod('OPTIONS')) {
      $response = response('', 200);
    } else {
      $response = $next($request);
    }
    if (!method_exists($response, 'header')) {
      return $response;
    }
    $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
    $response->header(
      'Access-Control-Allow-Headers',
      'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Token'
    );
    $response->header('Access-Control-Allow-Origin', '*');
    $response->header('Access-Control-Max-Age', 86400);
    return $response;
  }

Vue端 axios 请求:

axios.post('http://XXXX.com',{name:'test'});

这样写,在请求的时候就会遇到:

VUE axios发送跨域请求需要注意的问题

很坑爹有没有?明明是已经设置好了的啊,为毛是这样???

查找了很多资料才发现,axios在发送数据时需要字符串的方式进行发送,也就是说是放在form-data当中的。在实际项目中,为了方便,我引入了 qs 来帮助处理这块数据:

解决后的代码应该是:

import qs from 'qs';
axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{
  console.log(re);
});

OK,问题解决。明明感觉很简单,但是就是因为自己不懂,导致找了很久才知道原因,之前一直在折腾后台的设置,忽略了前端本身的处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js换图片效果可进行定时操作
Jun 09 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue-cli如何添加less 以及sass
Jul 06 #Javascript
微信小程序 跳转传递数据的实例
Jul 06 #Javascript
详解webpack进阶之插件篇
Jul 06 #Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 #Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 #Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 #Javascript
AngularJS常见过滤器用法实例总结
Jul 06 #Javascript
You might like
PHP开发中常用的8个小技巧
2008/08/27 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python实现调度算法代码详解
2017/12/01 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python内置数据类型之列表操作
2018/11/12 Python
python实现求特征选择的信息增益
2018/12/18 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python自动抢红包教程详解
2019/06/11 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
《秋姑娘的信》教学反思
2014/02/28 职场文书
班级活动总结格式
2014/08/30 职场文书
先进班集体申报材料
2014/12/26 职场文书
2014年个人总结范文
2015/03/09 职场文书