vue前后端端口號不同，proxytable代理跨域無效

前后端都部署在我的電腦上，只有端口號不同，前端用的vuecli，采用自帶的proxytable設置跨域，但是ajax發(fā)送請求的時候，卻沒有變端口號，狀態(tài)返回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
  },

控制臺狀態(tài)如下：

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

求問大家如何解決？

回答

編輯回答

念初

proxyTable改動一下：

 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
         // 去掉這個注釋
      '/admin': {
        target: 'http://localhost:8004',
        changeOrigin: true
      }
    },

    // 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
  },

2017年12月22日 17:05

編輯回答

喵小咪

您好，您這個問題解決了嗎？我也遇到這個問題了。

2017年9月19日 12:12

編輯回答

墨染殤

貼一下代理

proxyTable = {
  '/api': {
    target: 'http://localhost:8004/',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
}

比如后端接口為http://localhost:8004/query,那么在代碼中的請求url可以寫成/api/query。
另外代理proxyTable并不是直接請求你的后端接口，而是在cli層面啟動了一個server，你的代理請求先會到這個server，然后server再去你的接口進行請求，所以你看到的ajax請求沒有改變url。

2017年3月13日 16:49