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 相关文章推荐
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
js子页面获取父页面数据示例
May 15 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
jquery实现保存已选用户
Jul 21 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
js实现3D旋转相册
Aug 02 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 SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
python之wxPython菜单使用详解
2014/09/28 Python
使用python实现rsa算法代码
2016/02/17 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python dict如何定义
2020/09/02 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
EJB面试题
2015/07/28 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
个人委托书
2014/07/31 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
员工工作表扬信
2015/05/05 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
详解非极大值抑制算法之Python实现
2021/06/28 Python