vue2.0下axios实现跨域踩的坑
来源:互联网 发布:移动网络ip地址是什么 编辑:程序博客网 时间:2024/05/22 14:35
按踩坑顺序叙述。本人对http了解太少,所以坑踩得较多。
1.开始进行跨域时,知道vue2.0官方推荐axios进行ajax请求,大致看一下https://www.npmjs.com/package/axios axios的用法,感觉挺好理解嘛,封装的挺好,用时发现,不对啊。跨域设置在哪?最后找到了它
proxyTable: { '/shopping':{//此处并非一定和url一致。 target:'https://mainsite-restapi.ele.me/shopping', changeOrigin:true,//允许跨域 pathRewrite:{ '^/shopping': '' } }}此段代码表示,如果请求地址以/login开头,则自动加上target。如:/shopping/v2/restaurant/category 等于https://mainsite-restapi.ele.me/shopping/v2/restaurant/category设置成功,感觉axios就是方便。走着走着发现。。。不对
2.get请求成功,换成post请求。坑爹啊
:8000/#/login:1 XMLHttpRequest cannot load http://cunguan.com/index.php?user&q=action/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.
查了半天发现直接访问接口时,要对后端响应头进行设置(最后发现如果用1中的方法进行跨域访问设置则不需要在后端添加响应头)
// 指定允许其他域名访问header("Access-Control-Allow-Origin:*");// 响应类型header("Access-Control-Allow-Methods:POST");// 响应头设置header("Access-Control-Allow-Headers:x-requested-with,content-type");添加完毕,好了错没了,可发现数据好像有问题啊。我访问的是自己的接口,因为是以前的老接口,不能改所以只有硬着头皮改前台了
3.以前的请求参数为form data怎么这次请求神奇的变为request payload,崩溃中,最后找到要添加Content-Type:application/x-www-form-urlencoded
headers: { 'Content-Type': 'application/x-www-form-urlencoded'}this.$http.post('/login/index.php?user&q=action/login', {'a': 'test', 'b': '123456'}), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}) .then(function (response) { console.log(response) }) .catch(function (error) { console.log(error) })好吧 请求默认的需要修改我认了,改过之后发现。。。我参数呢?这次好了,参数都丢了继续查文档吧
4.Content-Type:application/x-www-form-urlencoded 时参数格式的问题下面摘自
https://github.com/mzabriskie/axios/blob/master/README.md#using-applicationx-www-form-urlencoded-format. 下面三种技能,我用了一种,轻松搞定。
Using application/x-www-form-urlencoded formatBy default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.**Browser**In a browser, you can use the URLSearchParams API as follows: var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params);Note that URLSearchParams is not supported by all browsers, but there is a polyfill available (make sure to polyfill the global environment).Alternatively, you can encode data using the qs library: var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }));Node.jsIn node.js, you can use the querystring module as follows: var querystring = require('querystring'); axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));You can also use the qs library.如果到这还没解决你的问题,不好意思,go for it 哈哈哈
阅读全文
0 0
- vue2.0下axios实现跨域踩的坑
- vue2 axios的使用
- Vue2的axios
- vue2.0之axios
- (Vue2.0)axios与vuex中actions结合使用的实现
- 【vue】element、vue2.0+、vuex、axios开发中遇到的坑点
- Vue2.0 项目实战案例及Demo,基于vue2.0+vuex+vue-router+axios实现
- 【Vue2.0】 项目实战案例及Demo,基于vue2.0+vuex+vue-router2+axios实现
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue2+vuex+axios的详讲
- vue2.0之axios使用详解(一)
- vue2.0中Ajax库(axios)
- vue2.0之axios使用详解(二)
- vue2.0 axios前后端数据处理
- vue2.0 axios前后端数据处理
- vue2.0之axios使用详解(一)
- vue2.0之axios使用详解(一)
- java乐观锁的使用
- Mac安装MySQL5.7.19 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
- JXL 详解
- hibernate获取session的两种方式的区别
- BZOJ 4819: [Sdoi2017]新生舞会 01分数规划 二分图最大权匹配(KM算法)/费用流
- vue2.0下axios实现跨域踩的坑
- AndroidStudio 混淆打包
- hdu1879 继续畅通工程 最小生成树
- 用户的邮件激活
- C指针笔记
- Android绘制学习——基础形状
- Dubbox 编译、安装
- 装饰模式(decorator)c++版本
- 全志R16调通USB接口的WIFI:RTL8188CU(分色排版)V1.0版本