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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
js实现简单计算器
Nov 22 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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数组中的重复值的实现代码
2011/07/17 PHP
组合算法的PHP解答方法
2012/02/04 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python设置环境变量的作用和实例
2019/07/09 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python归并排序算法过程实例讲解
2020/11/04 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
司机工作自我鉴定
2014/09/19 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
开学典礼致辞
2015/07/29 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python