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/是要跨域的,相当于浏览器设置了一道 ...
随机推荐
- Golang的面向对象编程【结构体、方法、继承、接口】
Golang也支持面向对象编程.但与以前学过传统的面向对象编程语言有区别.1)Golang没有类class,Go语言的结构体struct和类class有相似的特性.2)Golang中不存在继承,方法重 ...
- Spring源码阅读环境搭建
目录 安装gradle 导入Spring源码 创建测试模块my-test 其他问题 spring-aspects模块构建时报错 本文思维导图 本文将粗略的搭建一个Spring源码的阅读环境,为后面的源 ...
- 华为HCNA乱学Round 2:路由基础
- C++ 全局变量 静态变量 全局函数 静态函数
1. static 变量 静态变量的类型 说明符是static. 静态变量当然是属于静态存储方式,但是属于静态存储方式的量不一定就是静态变量. 例如外部变量虽属于静态存储方式,但不一定是静态变量,必须 ...
- HDU 2100 Lovekey (26进制大数、字符串)
Lovekey Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- AKKA学习(一)
AKKA简介 什么是AKKA Akka是一个由Scala编写的,能兼容Sacala和JAVA的,用于编写高可用和高伸缩性的Actor模型框架.它基于了事件驱动的并发处理模式,性能非常的高,并且有很高的 ...
- 洛谷 P3919 可持久化线段树 题解
题面 这题好水的说~很明显就是主席树的大板子 然而我交了3遍才调完所有的BUG,开好足够的数组,卡掉大大的常数: 针对与每次操作,change()会创建新节点,而ask()虽然也会更新左右儿子的节点编 ...
- 模板渲染JinJa2
模板渲染JinJa2 可以从数据库中查询数据,然后去替换我html中的对应内容(专业名词叫做模板渲染,你先渲染一下,再给浏览器进行渲染),然后再发送给浏览器完成渲染. 这个过程就相当于HTML模板 ...
- golang中如何阻塞等待所有goroutines都完成
有一天,一个人问了我此问题,回头仔细翻阅了一下资料,仔细的想了一下,这个问题的解决有两种方案.方案一:也是推荐方案,也是官方推荐方案,涉及到一个写并发经常关注的模块sync模块,利用里面的sync.W ...
- 如何使用Resource资源文件
一.目的 为了能够在DisplayAttribute中重复使用同样的名称,将所有的显示字符串集中管理. 二.方法 1.DisplayAttribute本身支持直接使用资源文件. [Display(Re ...