vue前后端端口号不同，proxytable代理跨域无效

Question

前后端都部署在我的电脑上，只有端口号不同，前端用的vuecli，采用自带的proxytable设置跨域，但是ajax发送请求的时候，却没有变端口号，状态返回404dev配置如下 dev: {    // Paths    assetsSubDirectory: 'static',    assetsPublicPath: '/',    proxyTable: {         // 去掉这个注释      'admin': {        target: 'http://localhost:8004',            changeOrigin: true,        pathRewrite: {          '^/admin': ''        }      }    },    // Various Dev Server settings    host: 'localhost', // can be overwritten by process.env.HOST    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined    autoOpenBrowser: false,    errorOverlay: true,    notifyOnErrors: true,    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-        /**     * Source Maps     */    // https://webpack.js.org/configuration/devtool/#development    devtool: 'cheap-module-eval-source-map',    // If you have problems debugging vue-files in devtools,    // set this to false - it *may* help    // https://vue-loader.vuejs.org/en/options.html#cachebusting    cacheBusting: true,    cssSourceMap: true  },控制台状态如下：Request URL: http://localhost:8081/admin/register1?0=n&1=a&2=m&3=e&4=%3D&5=%22&6=l&7=o&8=u&9=t&10=o&11=n&12=g&13=%22&14=%26&15=p&16=w&17=d&18=%3D&19=%22&20=1&21=1&22=1&23=1&24=%22Request Method: GETStatus Code: 404 Not FoundRemote Address: 127.0.0.1:8888Referrer Policy: no-referrer-when-downgrade求问大家如何解决？

Answer 1

贴一下代理

proxyTable = {

  '/api': {

    target: 'http://localhost:8004/',

    changeOrigin: true,

    pathRewrite: {

      '^/api': '/'

    }

  }

}

比如后端接口为http://localhost:8004/query,那么在代码中的请求url可以写成/api/query。

另外代理proxyTable并不是直接请求你的后端接口，而是在cli层面启动了一个server，你的代理请求先会到这个server，然后server再去你的接口进行请求，所以你看到的ajax请求没有改变url。