vue-cli开发时,ajax跨域详细解决办法
目的:使用vue-cli构建的项目,在开发时,想要要访问后台接口获取数据,这时就会出现跨域问题。在config/index中进行如下配置【即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址】 '/api': { //匹配所有以/api开始的路径target: 'http://example.com',changeOr
目的:使用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)
})
跨域原理():
- 本来由浏览器发起的http请求,变(代理)为本地服务器端发起http请求
跨域是浏览器禁止的,服务端并不禁止跨域 .
我们的http请求,从一开始的由浏览器发起,变成了由本地服务端发起,而服务端到服务端的数据传输是不存在跨域问题的,所以就解决了。
未设置代理时的通信原理: 本地文件 – 浏览器 – 远程服务端
设置了代理时的通信原理: 本地文件 – 浏览器 – 本地服务端 – 远程服务端
讲解原理:
在配置中配置target这一项: target: 'https://188.188.18.8’
在调用接口时,例如上方的vue-resource
示例。 第一个地址参数为:/api/v4/user/login
,
就会被本地服务器自动解析为https://188.188.18.8/v4/user/login
,而这个正是我们需要的地址。
通过浏览器打开页面.当我们通过ajax发起请求时:
本地服务端的地址(通常是localhost:8080
或者127.0.0.1:8080
)会先一步收到这个请求,本地服务端会对这个请求的地址字符串进行一次分析。
如果地址字符串前面部分是/api
,那么本地服务器会将api接口的字符串进行一次替换,变为 https://188.188.18.8/v4/ (配置地址) + user/login(接口调用方法处的详细地址),目标地址(https://188.188.18.8/v4/)。服务器上的,当前服务器上的文件发起请求,去获取服务器上其他东西,自然就不是跨域了。
更多推荐
所有评论(0)