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' } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。