首页 代码干货

最近在项目中遇到proxy 代理一直404,很艹蛋,整了半小时才整明白。
Vue项目中若无config文件夹则在根目录创建vue.config.js,代码如下:

module.exports = {
// 基本路径 baseURL已经过时
publicPath: './',
// 输出文件目录
outputDir: 'dist',
lintOnSave: true,
chainWebpack: () => { },
configureWebpack: () => { },
productionSourceMap: true,
parallel: require('os').cpus().length > 1,
pwa: {},
// webpack-dev-server 相关配置
devServer: {
    disableHostCheck: true,
    https: false,
    hotOnly: false,
    proxy: 'http://XXXXXX.org',
    before: app => { }
},
// 第三方插件配置
pluginOptions: {
    // ...
 }
}

配置完上方代码即可请求

  this.axios.post("/api/post").then((res) => {
     console.log(res);
  });

代理的作用就是封装API域名替换成当前本地域名:

QQ截图20201110094158.png

实际请求到的数据是 http://XXXXXX.org 这个域名的API数据

反向代理就这么简单又磨人。


文章评论