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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
angular多语言配置详解
May 16 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
对pandas中Series的map函数详解
2018/07/25 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
考试不及格检讨书
2014/01/09 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
男女朋友协议书
2014/04/23 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
工作散漫检讨书
2014/09/16 职场文书
先进个人评语大全
2015/01/04 职场文书
职称评定个人总结
2015/03/05 职场文书
早会开场白台词大全
2015/06/01 职场文书
高三教师工作总结2015
2015/07/21 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android