使用webpack模板初始化项目时,proxyTable配置无效!!
使用vue init webpack your-project-name初始化vue项目时,项目结构在此就不多说。里面config文件夹下index.js文件中有个proxyTable配置,此配置是代理转发所用。当向服务器端口(与vue项目不同端口,即跨域请求)请求数据时,代码是某个vue页面中methods下axios.get('/users').then((res)=>{cons
使用vue init webpack your-project-name初始化vue项目时,项目结构在此就不多说。里面config文件夹下index.js文件中有个proxyTable配置,此配置是代理转发所用。当向服务器端口(与vue项目不同端口,即跨域请求)请求数据时,代码是某个vue页面中methods下axios.get('/users').then((res)=>{console.log(res);}),即转发到http://localhost:3000下获取数据,此时请求数据失败,因为跨域导致,需要在build/webpack.dev.conf.js中配置devServer: {
proxy: config.dev.proxyTable
},使跨域请求生效。
如果是向本地json或者mock请求数据则不需要配置。
config/index.js中
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/users':{
target:'http://localhost:3000',
changeOrigin: true
}
},
...................
使用axios.get('/users').then((res)=>{console.log(res);})向后端请求数据是,本地地址并未被转发,也就是proxyTable未生效。
这是怎么解决呢,请教了一下大神。
build/webpack.dev.conf.js中
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
devServer: {
proxy: config.dev.proxyTable
},
.......................
在这里加上如上一段,是proxyTable配置生效。
更多推荐
所有评论(0)