【原创】Vue.js 中 axios 跨域访问错误
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 跨域访问错误的更多相关文章
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- js中各种跨域问题实战小结(二)
这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...
- js中各种跨域问题实战小结(一)
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- JS中实现跨域的方法总结
今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...
- react axios 跨域访问一个或多个域名
1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...
- 001_Three.js中的跨域问题
001_Three.js中的跨域问题 [情景描述]: 在初始化模型,引入字体和纹理皮肤图片的时候,由于跨域问题,出现了以下提示: Access to image at 'file:///F:/User ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
随机推荐
- js面向对象 多种创建对象方法小结
转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...
- CSTC 选课
选课 [问题描述] 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学分, ...
- 一个使用命令行编译Android项目的工具类
一个使用命令行编译Android项目的工具类 简单介绍 编译apk项目须要使用的几个工具,基本都在sdk中,它们各自是(Windows系统): 1.aapt.exe 资源打包工具 2.android. ...
- RecyclerView的使用(1)之HelloWorld
原创文章.转载请注明 http://blog.csdn.net/leejizhou/article/details/50670657 RecyclerView是伴随Android 5.0公布的新控件, ...
- spring之注解(一)概述
Spring的核心是依赖注入(DI),而依赖注入的基础是依赖信息的配置.这些配置称之为元数据. 在之前的的学习中.一直採用的是基于xml的配置,这些元数据配置在spring内部被注冊成为BeanDef ...
- 【网络协议】ICMP协议、Ping、Traceroute
ICMP协议 ICMP常常被觉得是IP层的一个组成部分,它是网络层的一个协议.它传递差错报文以及其它须要注意的信息.ICMP报文通常被IP层或更高层(TCP.UDP等)使用,它是在IP数据报内 ...
- SQLServer 多点及时备份技巧
为了保证数据库的安全性,我们都会规划数据库的容灾策略,包含本地备份.异地备份.raid.或者使用高可用性(如 日志传送.镜像.复制等)进行异地容灾.因为 SqlServer 数据库的备份仅仅有一个备份 ...
- int、bigint、smallint 和 tinyint范围
int.bigint.smallint 和 tinyint范围使用整数数据的精确数字数据类型.bigint从 -2^63 (-9223372036854775808) 到 2^63-1 (922337 ...
- SQL SERVER读书笔记:JOIN
nested loop join:适用于小数据集,有索引的情况.不占用内存,不用tempdb. merge join:大数据,要排序,多对多,用tempdb: hash join:对大数据集,少用户使 ...
- luogu4011 孤岛营救问题 分层图
关键词:分层图 状态压缩 最短路径 分层图:现在要求从起点到终点的最优路线,但受到手里拿着哪些钥匙的影响,最优路线不单纯了.因此,决定一个节点.一条边的存在的数中应当增加一个手中拿有钥匙的状态.这样就 ...