vue跨域解决方法


Posted in Javascript onOctober 15, 2017

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。

vue跨域解决方法

要想本地正常的调试,解决的办法有三个:

一、后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式  

 这样就可以跨域请求数据了。

二、使用JQuery提供的jsonp  (注:vue中引入jquery,自行百度)

methods: { 
 getData () { 
 var self = this 
 $.ajax({ 
  url: 'http://f.apiplus.cn/bj11x5.json', 
  type: 'GET', 
  dataType: 'JSONP', 
  success: function (res) { 
  self.data = res.data.slice(0, 3) 
  self.opencode = res.data[0].opencode.split(',') 
  } 
 }) 
 } 
}

通过这种方法也可以解决跨域的问题。

三、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

例如请求的url:“http://f.apiplus.cn/bj11x5.json”

1、打开config/index.js,在proxyTable中添写如下代码:

proxyTable: { 
 '/api': { //使用"/api"来代替"http://f.apiplus.c" 
 target: 'http://f.apiplus.cn', //源地址 
 changeOrigin: true, //改变源 
 pathRewrite: { 
  '^/api': 'http://f.apiplus.cn' //路径重写 
  } 
 } 
}

2、使用axios请求数据时直接使用“/api”:

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
 console.log(res) 
 })

通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:

let serverUrl = '/api/' //本地调试时 
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时 
export default { 
 dataUrl: serverUrl + 'bj11x5.json' 
}

总结

以上所述是小编给大家介绍的vue跨域解决方法 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery事件绑定和委托实例
Nov 25 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 #Javascript
详解 vue.js用法和特性
Oct 15 #Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
JS简单实现数组去重的方法分析
Oct 14 #Javascript
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
JS实现的简单表单验证功能完整实例
Oct 14 #Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
You might like
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
XML的代替者----JSON
2007/07/21 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
用python与文件进行交互的方法
2018/03/01 Python
Python扩展内置类型详解
2018/03/26 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
温馨提示标语
2014/06/26 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
房产公证书格式
2015/01/26 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
mysql自增长id用完了该怎么办
2022/02/12 MySQL