【原创】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反向代理至后台服务所开 ...
随机推荐
- git 强制pull
git fetch --all git reset --hard origin/master git pull
- n!最末尾非0数
最小周期串:如果s是ss的周期串,那么ss就可以表示成几个周期的s,如果s是ss的最小周期串,那么s就是ss的周期串中最小的一个.例,ZgxZgxZgxZgx的最小周期串是Zgx.{很好理解} 给你一 ...
- 多个线程作用于同一个runnable对象
多个线程作用于同一个runnable对象 学习了:https://www.cnblogs.com/ligang305/archive/2012/08/10/2632126.html http://as ...
- HDU 1429--胜利大逃亡(续)【BFS && 状态压缩】
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- cocos2d-x-3.1 NotificationCenter (coco2d-x 学习笔记八)
在这里分享记录自己的学习NotificationCenter时候的代码,这里用NotificationManager进行管理使用NotificationCenter. NotificationMana ...
- Mule ESB-3.Build a webservice proxy
自从引入ESB后,系统之间不再直接依赖.我负责的这块,主要是解决Webservice的问题.使系统A不再直接依赖系统B的Webservice. 我们选择的产品是Mule ESB.所以自然要使用Mule ...
- DevExpress14.1.2 xe XE6 高速安装
之前在在网上下载的DevExpress14.1.2 xe-XE6都是一个个包文件.须要一个个去查找编译安装,并且须要有一定的顺序要求. 所下面载了好久了都没有安装. 近期在网上找了个旧版的安装方法.以 ...
- @synthesize和@dynamic区别
在声明property属性后,有2种实现选择 @synthesize 编译器期间,让编译器自动生成getter/setter方法. 当有自定义的存或取方法时,自定义会屏蔽自动生成该方法 @dynami ...
- AtCoder Regular Contest 069
1. C - Scc Puzzle 计算scc的个数,先判断s个数需要多少个cc,多的cc,每四个可以组成一个scc.注意数据范围,使用long long. #include<bits/stdc ...
- DataTable和List相互转换的类
DataTable与List相互转换 .NET后台数据处理,从数据库中的捞出的数据格式一般是List和DataTable的格式.现在将两种格式相互转换的心得记录下来以便以后查找(直接上代码). pub ...