Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Analyse, wie Angular-Proxy basierend auf Gerüsten konfiguriert wird

Eine kurze Analyse, wie Angular-Proxy basierend auf Gerüsten konfiguriert wird

青灯夜游
青灯夜游nach vorne
2021-11-10 10:49:171569Durchsuche

In diesem Artikel erfahren Sie, wie Sie den Angular-Proxy (Proxy) basierend auf Gerüsten konfigurieren. Ich hoffe, er wird Ihnen hilfreich sein! „Angular-Proxy-Konfiguration“

Warum tun?

Eine kurze Analyse, wie Angular-Proxy basierend auf Gerüsten konfiguriert wird

Schreiben Sie eine Proxy-Datei, um Matching-Anfragen an andere Adressen weiterzuleiten und domänenübergreifende Probleme in der lokalen Entwicklung zu lösen.

Wie konfiguriere ich?

  • Erstellen Sie eine proxy.config.js im Stammverzeichnis.

Sie können in dieser Datei die folgende Konfiguration vornehmen.Fügen Sie --proxy zum Befehl „run project“ des Pakets hinzu. json -config Proxy.config.js

Einführung in die Konfiguration

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

context: Der Pfad, der abgeglichen werden musstarget: Die Adresse, an die weitergeleitet werden soll

    pathRewrite: Den angeforderten Teilpfad neu schreiben. Es handelt sich um ein Objekt. Der Schlüssel ist ^+der umzuschreibende Pfad, und der Wert ist der ersetzte Pfad.
  • proxy.config.js
  • 可以在这个文件中做如下配置
  • 在 package.json的运行项目命令中加入 --proxy-config proxy.config.js

配置介绍

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

module.exports = PROXY_CONFIG;
  • context: 需要匹配的path
  • target: 代理到的地址
  • pathRewrite: 将请求的部分path重写,它是一个对象,键是^+要重写的path, 值是替换的path。
  • secure: 安全设置
  • changeOrigin: 改变源

配置实例

http://localhost:4208/auth/login

想要代理到

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

可以这样配置

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

Q: 如果有两个接口,一个/api/cer/register,另外一个/api/cer/login,我该如何将两个接口代理到不同的地址?

rrreee

使用/api,只要是匹配到这个的都会走它的代理,不过如果在它前面加了个更加精确的/api/cer/loginsecure: Sicherheitseinstellungen

changeOrigin: Quelle ändern

Konfigurieren Sie die Instanz

als http://localhost:4208/auth/loginWenn Sie einen Proxy für

🎜http://www.baidu.com/news/login🎜🎜 Sie durchführen möchten kann es so konfigurieren🎜rrreee

🎜F: Wenn es zwei Schnittstellen gibt, eine /api/cer/register und die andere /api /cer/login,Wie kann ich zwei Schnittstellen an verschiedene Adressen weiterleiten? 🎜

rrreee🎜Verwenden Sie /api, solange es mit diesem übereinstimmt, wird es über seinen Proxy geleitet, aber wenn Sie vorab ein genaueres /api/cer/login hinzufügen Davon wird zuerst abgeglichen und dieser Proxy wird verwendet. 🎜🎜🎜Weitere Verwendungen werden auf Github aktualisiert: 🎜🎜https://github.com/deepthan/blog-angular🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie Angular-Proxy basierend auf Gerüsten konfiguriert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen