vue实现跨域的方法分析


Posted in Javascript onMay 21, 2019

本文实例讲述了vue实现跨域的方法。分享给大家供大家参考,具体如下:

vue实现跨域的方法分析

在请求的资源上没有“访问控制允许源”标头。因此,“http://LoalHoal:8081”是不允许访问的。

出现这个报错就说明,浏览器限制了跨域,需要设置跨域

一、后台更改header

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

二、使用JQuery提供的jsonp需要vue中引入jquery,不是今天讲的重点

methods: {
 getData () {
  var that = this
  $.ajax({
   url: 'yoururl',
   type: 'GET',
   dataType: 'JSONP',
   success: function (res) {
    that.data = res.data;
   }
  })
 }
}

三、使用vue-cli脚手架搭建项目时候的proxyTable解决跨域

在config目录下的index.js的proxyTable配置:

第一种:

proxyTable: {
    '/api': { //使用"/api"来代替"http://v.juhe.cn/toutiao/index"
      target: 'http://v.juhe.cn/toutiao/index', //源地址
      changeOrigin: true, //改变源
      pathRewrite: {
       '^/api': '' //路径重写
       }
     }
  },
this.axios.post("/api?type=keji&key=yourkey").then(res => {
 console.log("api:"+res);
 this.kjnews = res.data.result.data;
});

注意:路径重写后面是空的不然请求不成功,最后配置完之后还要npm run dev重启一下

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
vue动态绑定class的几种常用方式小结
May 21 #Javascript
express启用https使用小记
May 21 #Javascript
使用express获取微信小程序二维码小记
May 21 #Javascript
小程序server请求微信服务器超时的解决方法
May 21 #Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 #Javascript
用node.js写一个jenkins发版脚本
May 21 #Javascript
vue-router源码之history类的浅析
May 21 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
第三节--定义一个类
2006/11/16 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
Javascript执行流程细节原理解析
2020/05/14 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
如何运行带参数的python脚本
2019/11/15 Python
python小白学习包管理器pip安装
2020/06/09 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
编写python代码实现简单抽奖器
2020/10/20 Python
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
学生会竞选自荐信
2013/10/12 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
劲霸男装广告词
2014/03/21 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
2015教师年度考核评语
2015/03/25 职场文书
新学期开学寄语2016
2015/12/04 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
CSS极坐标的实例代码
2021/06/03 HTML / CSS
golang连接MySQl使用sqlx库
2022/04/14 Golang