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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
javascript中"/"运算符常见错误
Oct 13 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 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投票程序源码
2007/03/11 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
索趣科技的答案
2007/02/07 Javascript
javascript+xml技术实现分页浏览
2008/07/27 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python的socket编程入门
2018/01/29 Python
python3.6实现学生信息管理系统
2019/02/21 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
先进事迹报告会感言
2014/01/24 职场文书
一分钟演讲稿
2014/04/30 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
道德演讲稿
2014/05/21 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
Python预测分词的实现
2021/06/18 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers