VUE axios发送跨域请求需要注意的问题
2017-07-06 14:09
1156 查看
在实际项目中前端使用到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'});
这样写,在请求的时候就会遇到:
很坑爹有没有?明明是已经设置好了的啊,为毛是这样???
查找了很多资料才发现,axios在发送数据时需要字符串的方式进行发送,也就是说是放在form-data当中的。在实际项目中,为了方便,我引入了 qs 来帮助处理这块数据:
解决后的代码应该是:
import qs from 'qs'; axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{ console.log(re); });
OK,问题解决。明明感觉很简单,但是就是因为自己不懂,导致找了很久才知道原因,之前一直在折腾后台的设置,忽略了前端本身的处理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue axios 中提交表单数据(含上传文件)
- Vue.js实战之使用Vuex + axios发送请求详解
- axios基本入门用法教程
- vue中axios处理http发送请求的示例(Post和get)
- Vue+axios 实现http拦截及路由拦截实例
- axios学习教程全攻略
- vue axios同步请求解决方案
- 简单谈谈axios中的get,post方法
- vue使用Axios做ajax请求详解
- 详解Vue用axios发送post请求自动set cookie
- 详解Vue 2.0封装axios笔记
- 详解vue axios中文文档
- vue axios用法教程详解
- 关于使用axios的一些心得技巧分享
- Vue2 配置 Axios api 接口调用文件的方法
- 浅谈关于axios和session的一些事
- vue项目中使用axios上传图片等文件操作
- Vue官方推荐AJAX组件axios.js使用方法详解与API
相关文章推荐
- vue开发:VUE axios发送跨域请求需要注意的问题
- 今天工作需要调用一个c++程序,以给那个程序发送请求的方式,遇到了跨域问题
- Nginx环境JS向PHP发送多个url请求跨域问题
- 跨域部署Silverlight时需要注意的问题
- ajax跨域请求java需要注意的事项
- 跨域部署Silverlight时需要注意的问题
- [随记]web开发需要注意请求参数编码问题
- 从客户端(flex端/flex端)发送到服务端(php)需要注意的问题
- 使用蓝牙发送文件时需要注意的问题
- 过滤器实现登录拦截需要注意的问题(AJAX请求的处理)
- 七牛的管理接口不支持js端发送请求进行管理(设计到跨域问题)
- Spring MVC中处理ajax请求的跨域问题与注意事项详解
- socket 发送数据需要注意的问题
- 发送和接收无序广播或有序广播需要注意的问题
- springboot vue 登陆发送请求(跨域问题)02
- vuejs中vue-resource或使用axios发送请求及解决跨域问题
- [随记]web开发需要注意请求参数编码问题
- 百度地图API 云存储·LBS.云 跨域问题解决方法——通过java.net.URLConnection发送HTTP请求
- 用EidtText发送Emoji表情需要注意的问题
- 前端接收 get 请求,用jsonp 解决跨域问题, 需要服务端的response 也要jsonp 类型