vue 解决axios 跨域问题
闲着没事,假期敲vue 请求数据,总结下vue跨越问题
第一种.服务器服务器不支持跨域请求
1.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。
添加下面的代码:
proxyTable: {
'/api': {
target: 'http://api.douban.com/v2',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
将target设置为我们需要访问的域名。
2.然后在main.js中设置全局属性:
Vue.prototype.HOST = '/api'
3.我们就可以在全局使用这个域名了,如下:
var url = this.HOST + '/movie/in_theaters'
this.$http.get(url).then(res => {
this.movieList = res.data.subjects;
},res => {
console.info('调用失败');
});
第二种:服务器端支持跨域
String data = JsonUtil.toJsonNonNull(pubXtzdBos); OutputStream out = response.getOutputStream(); out.write(data.getBytes("UTF-8"));//以UTF-8进行编码 response.setHeader("Access-Control-Allow-Origin", "*");
//告诉浏览器编码方式
response.setHeader("Content-Type","text/html;charset=UTF-8" );
就是能支持跨域那就可以使用jsonp来请求了。jsonp实际上就是通过添加script标签来添加的,
请求回来的数据也是js格式。axios目前还不支持,只能自己手动创建script标签,把请求的地址赋给script标签的src属性,最后添加到head标签上,等到请求返回再把标签删掉:
jsonpRequest: function (a, e) {
this._ajaxTimer && clearTimeout(this._ajaxTimer);
this._ajaxTimer = setTimeout(function () { var request_script = document.createElement('script');
request_script.setAttribute("id", "request_script");
request_script.src = 'http://xxxx'+'&t=' + Date.now();
window.callback = function (response) {
// 移除脚本
document.body.removeChild(document.getElementById('request_script'));
console.log(response.content);
}
document.body.appendChild(request_script);
}, 500);
},
讲真,本地开发适合第一种吧 然后可以正常使用axios进行ajax请求了,
但这样只能在开发模式下才能使用。打包部署的时候建议使用nginx做代理
,我也没有试过第二种,也是查阅资料总结的,哈哈
vue 解决axios 跨域问题的更多相关文章
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue 使用axios 跨域请求数据的问题
axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...
- webpack+vue解决前端跨域问题
webpack 跨域,在这里整理了一下逻辑首先不是为了axios库来进行跨域的,而是直接通过node的webpack设置代理来完成跨域的. 先贴一条自己请求的连接 1.设置自定义域: 在config目 ...
- Vue 中 axios 跨域配置 (!!!配置完成需要重新运行,不然也不起作用)
当拿到一个网址如:https://music.163.com/store/api/categorypage/list 获取数据是出现如下: 证明该网址不能非常直观的拿到数据.接下来我们试试跨域拿这个 ...
- vue.js vue-cli 中解决 axios 跨域调用的问题
修改 /config/index.js 文件如下: proxyTable: { '/api': { target: 'http://chifan.local', changeOrigin: true, ...
- vue 解决jsonp跨域
在Vue中使用jsonp 参考链接:https://blog.csdn.net/m0_38134431/article/details/87930647 在vue中使用vue-jsonp 参考链接:h ...
- vue 解决axios请求出现前端跨域问题
vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
随机推荐
- sorted&filter&map
python里列表的sort和内置的sorted函数,都可以进行排序,列表的sort方法是在原有的列表上进行排序,sorted是会返回一个新的对象 persons = [ {'name': '小明', ...
- win10安装mysql-最简单教程
工具下载地址 链接: https://pan.baidu.com/s/1XL2wUDrcd9NpT8NOcXoDTQ 提取码: vu34 下载好之后解压. 在目录D:\Program Files\my ...
- docker容器和宿主机之间复制文件
https://blog.csdn.net/u012416928/article/details/55049063 https://blog.csdn.net/u011596455/article/d ...
- 锋利的jQuery(第二版) 初读笔记
window.onload(): 必须等待网页中所有的内容加载完毕后(包括图片)才能执行. $(document).ready(): 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没 ...
- 【CUDA】CUDA框架介绍
引用 出自Bookc的博客,链接在此http://bookc.github.io/2014/05/08/my-summery-the-book-cuda-by-example-an-introduct ...
- [转帖]java必备的开发知识和技能
java必备的开发知识和技能 https://blog.csdn.net/qq_34405062/article/details/89389646 学习一下java 其实上学那会儿学的 早就过时加落伍 ...
- 洛谷 P2868 [USACO07DEC]观光奶牛Sightseeing Cows 题解
题面 这道题是一道标准的01分数规划: 但是有一些细节可以优化: 不难想到要二分一个mid然后判定图上是否存在一个环S,该环是否满足∑i=1t(Fun[vi]−mid∗Tim[ei])>0 但是 ...
- 【提高组NOIP2008】双栈排序 (twostack.pas/c/cpp)
[题目描述] Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈S1和S2,Tom希望借助以下4种操作实现将输入序列升序排序. 操作a 如果输入序列不为空,将第一个元素压入栈S1 操作b 如果栈 ...
- [luogu 3175] [HAOI2015]按位或(min-max容斥+高维前缀和)
[luogu 3175] [HAOI2015]按位或 题面 刚开始你有一个数字0,每一秒钟你会随机选择一个[0,2^n-1]的数字,与你手上的数字进行按位或运算.问期望多少秒后,你手上的数字变成2^n ...
- postgresql 用 like 可以 复制结构包括主键约束
create tabletablename ( like tablename INCLUDING INDEXES INCLUDING COMMENTS); PostgreSQL 动态表复制(CREAT ...