Beispiel-Tutorial einer domänenübergreifenden Webpack-Entwicklungsumgebung

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der domänenübergreifenden Entwicklungsumgebung von vue-cli Webpack vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Bearbeiten Sie die Option dev.proxyTable in config/index.js. Der Dev-Server verwendet http-proxy-middleware für das Proxying

Um das Kreuz zu lösen -Domänenproblem,

1. Normalerweise wird Jsonp verwendet, aber Jsonp kann nur eine Get-Anfrage sein.

2. Oder nutzen Sie die CORS-Unterstützung und legen Sie Access-Control-Allow-Origin fest: *

0 Erforderliche Fähigkeiten

Vertraut mit Vue-Loader und Webpack

1 Grundkonfiguration

Bearbeiten Sie die Datei confix/index.js. Der Entwicklungsserver verwendet http-proxy-middleware . Proxy

// config/index.js
module.exports = {
 // ...
 dev: {
  proxyTable: {
   // proxy all requests starting with /api to jsonplaceholder
   '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 }
}

Das obige Beispiel leitet die Anfrage /api/posts/1 an http://jsonplaceholder.typicode.com/posts/1 weiter.

2 Global Match

Sie können eine Filteroption bereitstellen, die eine benutzerdefinierte Funktion sein kann, um zu bestimmen, ob eine Anfrage weitergeleitet werden soll:

Stellen Sie einen Filter bereit, um Routing-Regeln und Routing-Methoden zu formulieren.

proxyTable: {
 '*': {
  target: 'http://jsonplaceholder.typicode.com',
  filter: function (pathname, req) {
   return pathname.match('^/api') && req.method === 'GET'
  }
 }
}

[Verwandte Empfehlungen]

Kostenloses Javascript-Video-Tutorial

2. Detaillierte Beispiele für die Bootstrap-Formularvalidierung

3.

OffsetWidth-Fehler und Verarbeitungsmethoden in JS

4.

Detaillierte Erläuterung der jQuery-Validierungsüberprüfung mehrerer Namen

5.

Detailliertes Beispiel für ein EasyUI-Dropdown-Listen-Klickereignis

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial einer domänenübergreifenden Webpack-Entwicklungsumgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!