1. 程式人生 > >webpack 跨域代理設定

webpack 跨域代理設定

在config資料夾下的 index.js檔案中 增加屬性 proxyTable

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: "http://localhost:8760",
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
      }
    },
}

假設controller為 ‘/User/’ ,其中的方法為 ‘getUserList’ 那麼介面地址應該為
localhost:8760/User/getUserList 其中的/User/getUserList就是介面

其中 ‘/api’ 就是等於 target地址,
changeOrigin:true 就是開啟跨域。
pathRewrite:重寫地址。如果介面中有api呢,如跨服務:

zuul:
  prefix: /api
  routes:
    admin:
      path: /admin/**
      serviceId: admin

    ar:
      path: /ar/**
      serviceId: account-receivable
    pre:
      path: /pre/**
      serviceId: prepay

這個時候的介面地址就是/api/服務(admin等)/controller/方法名。
對比上面的例子,介面就是/api/admin/User/getUserList.
那麼這個時候如果直接代理。就會造成少一個./api,因為/api
代替了target。那麼介面中的/api沒了,所以要重寫地址,匹配出來一個/api

說到最後就是/api 代表target/api ,而最後一個/api 為“” 所以 /api代表target