Vue.js 中 axios 跨域访问错误问题及解决方法


Posted in Javascript onNovember 21, 2018

1、假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口)

2、而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误:

Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

解决方法:

1、修改config/index.js, 修改 proxytable

proxyTable: {
 '/apis': {
   target: 'http://www.test.com/apis/', // 接口地址
   changeOrigin: true, 
   pathRewrite: {
     '^/apis': ''  //需要rewrite重写的,
   }       
 }
},

2、重启 npm run dev    (很重要,否则不生效)

3、访问接口(访问时通过代理转发的,有点类似APACHE的urlrewrite,不需要完整http://www.test.com网址。)

this.$api.get('/apis/index.php?act=login', {
  "act": "login"
 }, response => {
    //success
 },error => {
    //error
 }
);

大功告成,成功解决错误,另外:PHP端不需要做任何的header设置,网上很多教程胡说八道,根本不能实现跨域。

总结

以上所述是小编给大家介绍的Vue.js 中 axios 跨域访问错误问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 #Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 #Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 #Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
一步步教你利用Docker设置Node.js
Nov 20 #Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 #Javascript
vue中的适配px2rem示例代码
Nov 19 #Javascript
You might like
PHP分页类集锦
2014/11/18 PHP
PHP实现百度人脸识别
2019/05/06 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
python备份文件的脚本
2008/08/11 Python
Python实现配置文件备份的方法
2015/07/30 Python
python简单实现获取当前时间
2016/08/27 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python获取交互式ssh shell的方法
2019/02/14 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
美术指导助理求职信
2014/04/20 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
肖申克救赎观后感
2015/06/02 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫