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 相关文章推荐
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
js跳转页面方法总结
2014/01/29 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
js分页工具实例
2015/01/28 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
关于vue中 $emit的用法详解
2018/04/12 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Vue.js中的高级面试题及答案
2020/01/13 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python编码类型转换方法详解
2016/07/01 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
wxPython色环电阻计算器
2019/11/18 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
普通员工辞职信
2014/01/17 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
大学生作弊检讨书
2014/09/11 职场文书
生产现场禁烟通知
2015/04/23 职场文书
检讨书范文
2019/04/16 职场文书
python基础之匿名函数详解
2021/04/21 Python