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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
JQuery球队选择实例
2015/05/18 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
jQuery EasyUI 入门必看
2016/06/03 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python实现图片批量压缩程序
2018/07/23 Python
django框架中间件原理与用法详解
2019/12/10 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
贪污检举信范文
2015/03/02 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
Fluentd搭建日志收集服务
2022/09/23 Servers