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 textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
Script的加载方法小结
2011/01/12 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Python的一些用法分享
2012/10/07 Python
python实现图片转字符小工具
2019/04/30 Python
Python实现结构体代码实例
2020/02/10 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
土木工程毕业生推荐信
2013/10/28 职场文书
军训自我鉴定100字
2014/02/13 职场文书
老公爱的承诺书
2014/03/31 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
网聊搭讪开场白
2015/05/28 职场文书
首次购房证明
2015/06/19 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
Win11查看设备管理器
2022/04/19 数码科技