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 相关文章推荐
jQuery学习基础知识小结
Nov 25 Javascript
手机号码,密码正则验证
Sep 04 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
vue 点击按钮增加一行的方法
Sep 07 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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
php中的时间处理
2006/10/09 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
D3.js实现直方图的方法详解
2016/09/25 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python redis存入字典序列化存储教程
2020/07/16 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
审计专业自荐信范文
2014/04/21 职场文书
单位租房协议范本
2014/12/03 职场文书
邀请函的格式
2015/01/30 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
社会实践心得体会范文
2016/01/14 职场文书
小学英语课教学反思
2016/02/15 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
聊聊Python String型列表求最值的问题
2022/01/18 Python
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫