vue-cli开发时,关于ajax跨域的解决方法(推荐)


Posted in Javascript onFebruary 03, 2018

目的:使用vue-cli构建的项目,在开发时,想要访问后台接口获取数据,这时就会出现跨域问题。

在config/index.js中进行如下配置

【即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址】

proxyTable: { 
‘/api': { 
target: ‘https://188.188.18.8‘, 
changeOrigin: true, 
pathRewrite: { 
‘^/api': ” 
} 
} 
}
“`

vue-resource调用示例

this.$http.get('/api/v4/user/login', [options]).then(function(response){
  // 响应成功回调
}, function(response){
  // 响应错误回调
});

axios调用示例

axios({
  method: 'get',
  headers: {'Accept': '*/*'},
  url: '/api/v4/user/login',
  data: options
 })
 .then(function (response) {
  console.log(response.data)
 })
 .catch(function (error) {
  console.log(error)
 })

讲解原理:

在配置中: target: ‘https://188.188.18.8'

在上方vue-resource示例中 第一个参数为: /api/v4/user/login

就会被本地服务器自动解析为 https://188.188.18.8/v4/user/login 而这个正式我们需要的地址。

跨域原理(本地文件假装在远程服务器上):

通过浏览器打开页面,当发起请求时:本地服务器的地址(通常是localhost:8080或者127.0.0.1:8080)会收到这个请求,接下来发现这个请求地址中含有字符串 /api,那么本地服务器会将请求地址变为 https://188.188.18.8/v4/ (配置地址) + user/login(调用方法处的详细地址)。

同时本地服务器的地址会由localhost:8080 变为https://188.188.18.8/v4/,结果就是:

我们本地的文件会被认为是放在目标地址(https://188.188.18.8/v4/)服务器上的,当前服务器上的文件请求服务器其他东西,自然就不是跨域了。

以上这篇vue-cli开发时,关于ajax跨域的解决方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 #Javascript
JavaScript实现求最大公共子串的方法
Feb 03 #Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 #Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 #Javascript
JS删除数组里的某个元素方法
Feb 03 #Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
JS实现百度搜索接口及链接功能实例代码
Feb 02 #Javascript
You might like
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
详解Python的三种拷贝方式
2020/02/11 Python
在pycharm中实现删除bookmark
2020/02/14 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
营销与策划个人求职信
2013/09/22 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
暑期家教宣传单
2015/07/14 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
Hive常用日期格式转换语法
2022/06/25 数据库