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操作select option 的代码小结
Jun 21 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
vue cli安装使用less的教程详解
2019/07/12 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python中str.join()简单用法示例
2018/03/20 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
小区环境卫生倡议书
2015/04/29 职场文书
班级联欢会主持词
2015/07/03 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers