使用webpack模板初始化项目时，proxyTable配置无效！！

最新推荐文章于 2024-05-12 21:27:07 发布

meifeng88

最新推荐文章于 2024-05-12 21:27:07 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习之路文章标签： vue webpack express mongodb

本文链接：https://blog.youkuaiyun.com/qq_28719103/article/details/82774958

vue学习之路专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中解决跨域请求的问题，通过配置proxyTable实现开发环境下的跨域代理转发，确保前端能够正常从后端获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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配置生效。