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

Question

前后端都部署在我的电脑上，只有端口号不同，前端用的vuecli，采用自带的proxytable设置跨域，但是ajax发送请求的时候，却没有变端口号，状态返回404

dev配置如下

 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=%22

Request Method: GET

Status Code: 404 Not Found

Remote Address: 127.0.0.1:8888

Referrer 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。