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 相关文章推荐
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
js表单登陆验证示例
Oct 19 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
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访问查询mysql数据的三种方法
2006/10/09 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python中reduce()函数的使用方法示例
2017/09/29 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
this关键字的含义
2015/04/08 面试题
什么是会话Bean
2015/05/14 面试题
工商企业管理应届生求职信
2013/11/03 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
组织关系转移介绍信
2014/01/16 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
企业宣传策划方案
2014/05/29 职场文书
法院个人总结
2015/03/03 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python