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 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
浅析Ajax语法
Dec 05 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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通过rmdir删除目录的简单用法
2015/03/18 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
JavaScript 异步调用
2017/10/25 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Python实现简单字典树的方法
2016/04/29 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python实现批量图片格式转换
2020/06/16 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python关闭占用端口方式
2019/12/17 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python实现堆排序的实例讲解
2020/02/21 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
社区义诊活动总结
2014/04/30 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS