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

本篇內(nèi)容介紹了“如何基于腳手架配置Angular代理”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Angular proxy 配置

• 官網(wǎng)文檔 https://angular.io/guide/build#using-corporate-proxy

為何做？

寫(xiě)一個(gè)代理文件，將匹配的請(qǐng)求代理到其他地址，解決本地開(kāi)發(fā)跨域問(wèn)題。

如何配置？

• 在根目錄中創(chuàng)建一個(gè)proxy.config.js

• 可以在這個(gè)文件中做如下配置

• 在 package.json的運(yùn)行項(xiàng)目命令中加入 --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: 將請(qǐng)求的部分path重寫(xiě)，它是一個(gè)對(duì)象，鍵是^+要重寫(xiě)的path， 值是替換的path。

• secure: 安全設(shè)置

• changeOrigin: 改變?cè)?/p>

配置實(shí)例

如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： 如果有兩個(gè)接口，一個(gè)/api/cer/register,另外一個(gè)/api/cer/login,我該如何將兩個(gè)接口代理到不同的地址？

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

使用/api，只要是匹配到這個(gè)的都會(huì)走它的代理，不過(guò)如果在它前面加了個(gè)更加精確的/api/cer/login,會(huì)優(yōu)先匹配到它，走這個(gè)代理。

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