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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
js 自动播放的实例代码
Nov 19 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
HTML的select控件美化
Mar 27 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
JS数组的常用方法整理
Mar 31 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
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php生成略缩图代码
2012/07/16 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php源码的使用方法讲解
2019/09/26 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
js a标签点击事件
2017/03/30 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python的缺点和劣势分析
2019/11/19 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
python实现批量命名照片
2020/06/18 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
Python文件操作的面试题
2013/06/22 面试题
保险公司晨会主持词
2014/03/22 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
文艺委员竞选稿
2015/11/19 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang