本篇文章主要介绍了vue-cli webpack 开发环境跨域详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
edit dev.proxytable option in config/index.js. the dev server is using http-proxy-middleware for proxying
为了解决跨域问题，
通常会使用jsonp，但是jsonp只能是get请求。
或者使用cors支持，设置access-control-allow-origin: *
0 前置技能
熟悉vue-loader 和 webpack
1 基本配置
编辑confix/index.js文件 dev server使用的是http-proxy-middleware来代理
// config/index.js
module.exports = {
// ...
dev: {
proxytable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeorigin: true,
pathrewrite: {
'^/api': ''
}
}
}
}
}
the above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.
2 全局匹配
you can provide a filter option that can be a custom function to determine whether a request should be proxied:
提供一个过滤器，制定路由规则和路由方法。
proxytable: {
'*': {
target: 'http://jsonplaceholder.typicode.com',
filter: function (pathname, req) {
return pathname.match('^/api') && req.method === 'get'
}
}
}
【相关推荐】
javacript免费视频教程
2. bootstrap 表单验证formvalidation 的实例详解
3. js中offsetwidth的bug及处理方法
4. jquery validate 校验多个name的实例详解
5. easyui下拉列表点击事件的实例详解
以上就是webpack开发环境跨域的实例教程的详细内容。