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

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

青灯夜游
Freigeben: 2021-11-10 10:49:17
nach vorne
1700 Leute haben es durchsucht

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren
  • 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,
},
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage