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 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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安全配置详细说明
2011/09/26 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
八年级生物教学反思
2014/01/22 职场文书
家长对孩子评语
2014/01/30 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
个人债务授权委托书
2014/10/17 职场文书
安全伴我行主题班会
2015/08/13 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers