未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

目的:使用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跨域的解决方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:详解vue-cli开发环境跨域问题解决方案详解Vue-cli 创建的项目如何跨域请求vue-cli webpack 开发环境跨域详解Vue Ajax跨域请求实例详解

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: 跨域,api,v4,vue,地址,cli,https,login,user,请求,function,response
分页:12
转载请注明
本文标题:vue-cli开发时,关于ajax跨域的解决方法(推荐)
本站链接:http://www.codesec.net/view/572188.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(46)