淺析如何基於腳手架配置 Angular 代理（proxy）

本篇文章為大家介紹如何基於鷹架配置 Angular 代理（proxy），希望對大家有幫助！

Angular proxy 設定

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

【相關教學推薦：《angular教學」】

為何要做？

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

如何配置？

• 在根目錄中建立一個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###,會優先匹配到它，走這個代理。 #########更多用法更新於 github：######https://github.com/deepthan/blog-angular##########更多程式相關知識，請訪問：###程式設計入門###！ ！ ###

以上是淺析如何基於腳手架配置 Angular 代理（proxy）的詳細內容。更多資訊請關注PHP中文網其他相關文章！