vue-cli webpack 开发环境跨域详解
editdev.proxyTableoptioninconfig/index.js.Thedevserverisusinghttp-proxy-middlewareforproxying
为了解决跨域问题，
- 通常会使用Jsonp，但是jsonp只能是get请求。
- 或者使用CORS支持，设置Access-Control-Allow-Origin:*
0前置技能
熟悉vue-loader和webpack
1基本配置
编辑confix/index.js文件devserver使用的是http-proxy-middleware来代理
//config/index.js
module.exports={
//...
dev:{
proxyTable:{
//proxyallrequestsstartingwith/apitojsonplaceholder
'/api':{
target:'http://jsonplaceholder.typicode.com',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
}
}
Theaboveexamplewillproxytherequest/api/posts/1tohttp://jsonplaceholder.typicode.com/posts/1.
2全局匹配
youcanprovideafilteroptionthatcanbeacustomfunctiontodeterminewhetherarequestshouldbeproxied:
提供一个过滤器，制定路由规则和路由方法。
proxyTable:{
'*':{
target:'http://jsonplaceholder.typicode.com',
filter:function(pathname,req){
returnpathname.match('^/api')&&req.method==='GET'
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。