详解Vue 开发模式下跨域问题
设置请求头部
- 后端设置请求头部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请求。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。