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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
Vue制作Todo List网页
Apr 26 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
JavaScript继承与多继承实例分析
May 26 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购物网站支付paypal使用方法
2010/11/28 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
Python实现excel转sqlite的方法
2017/07/17 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python for 循环获取index索引的方法
2019/02/01 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
淘宝客服工作职责
2014/07/11 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
教师学期末个人总结
2015/02/13 职场文书
培训简讯范文
2015/07/20 职场文书