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 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python实现多属性排序的方法
2018/12/05 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
logging level级别介绍
2020/02/21 Python
如何在python中执行另一个py文件
2020/04/30 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
旷课检讨书
2015/01/26 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书