如何基于腳手架配置Angular代理

本篇內容介紹了“如何基于腳手架配置Angular代理”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Angular proxy 配置

• 官網文檔 https://angular.io/guide/build#using-corporate-proxy

為何做？

寫一個代理文件，將匹配的請求代理到其他地址，解決本地開發跨域問題。

如何配置？

• 在根目錄中創建一個proxy.config.js

• 可以在這個文件中做如下配置

• 在 package.json的運行項目命令中加入 --proxy-config proxy.config.js

配置介紹

const PROXY_CONFIG = [
  {
    context: ['/api'],
    target: 'http://xxx',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      '^/api': '',
    },
  },
];
module.exports = PROXY_CONFIG;

• context: 需要匹配的path

• target: 代理到的地址

• pathRewrite: 將請求的部分path重寫，它是一個對象，鍵是^+要重寫的path， 值是替換的path。

• secure: 安全設置

• changeOrigin: 改變源

配置實例

如http://localhost:4208/auth/login

想要代理到

http://www.baidu.com/news/login

可以這樣配置

const PROXY_CONFIG = [
  {
    context: ['/auth/login'],
    target: 'http://www.baidu.com',
    pathRewrite: {
        '^/auth/login': '/news/login',
    },
  },
  
]

module.exports = PROXY_CONFIG;

Q： 如果有兩個接口，一個/api/cer/register,另外一個/api/cer/login,我該如何將兩個接口代理到不同的地址？

{
    context: ['/api/cer/login'],
    target: 'xxx1',
    secure: false,
    changeOrigin: true,
},
{
    context: ['/api'],
    target: 'xxx2',
    secure: false,
},

使用/api，只要是匹配到這個的都會走它的代理，不過如果在它前面加了個更加精確的/api/cer/login,會優先匹配到它，走這個代理。

“如何基于腳手架配置Angular代理”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！