好资源导航 » 文章资讯 » 详解Vue 开发模式下跨域问题

详解Vue 开发模式下跨域问题

2024-02-20 18:08:05 396

设置请求头部

后端设置请求头部Access-Control-Allow-Credentials:true和Access-Control-Allow-Origin:www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下：

importaxiosfrom'axios'
importconfigfrom'../config'
exportdefault{
request(method,uri,data,headerConfig={withCredentials:true}){
if(!method){
console.error('APIfunctioncallrequiresmethodargument')
return
}

if(!uri){
console.error('APIfunctioncallrequiresuriargument')
return
}

leturl=config.serverURI+uri

returnaxios({method,url,data,...headerConfig})
}
}

jQuery的$.ajax:：

$.ajax({
type:"POST",
url:"http://www.xxx.com/api.php",
dataType:'json',
xhrFields:{
withCredentials:true
},
crossDomain:true
}).then((json)=>{
//balabala...
})

使用nodejs做代理

上面的那种方法需要后端配合设置头部，对于我这种前端小白来讲，联调时各种不成功的报错也无从解决，所以个人比较倾向于下面这种做法，鉴于使用脚手架vue-cli创建的项目，作者已经给我提供好了解决的方法。
找到项目文件夹下的config/index.js,里面有一行proxyTable:{},这里就是作者为我们留的接口,我们添加代理规则进去

varpath=require('path')
module.exports={
build:{
env:require('./prod.env'),
index:path.resolve(__dirname,'../xxx/index.html'),
assetsRoot:path.resolve(__dirname,'../xxx'),
assetsSubDirectory:'static',
assetsPublicPath:'/',
productionSourceMap:true,
productionGzip:false,
productionGzipExtensions:['js','css']
},
dev:{
env:require('./dev.env'),
port:8080,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{
'/api':{
target:'http://www.xxx.com/api.php/',
changeOrigin:true,
pathRewrite:{
'^/api':'/'
}
}
},
cssSourceMap:false
}
}

这里target为目标域名，pathRewrite为转换规则，请求数据时将接口地址根据转换规则请求就可以解决跨域啦！（这里也可以配置headers，设置cookis，token等）

jsonp

jsonp也是一种解决跨域的方法，不过我从来没有用过，在网上查了下资料，jsonp的原理是script标签引入js是不受域名限制的,由于是模拟插入script标签,所以不可以用post请求。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解Vue 开发模式下跨域问题

热门推荐

随机推荐