Probleme bei der domänenübergreifenden Vue-Verarbeitung (ausführliches Tutorial)

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Art und Weise, wie Vue mit domänenübergreifenden Problemen umgeht, und eine Einführung in verwandte Wissenspunkte. Freunde, die daran interessiert sind, können daraus lernen.

Express-Proxy-Anfrage festlegen

In einem Projekt basierend auf vue-cli legen Sie den Proxy in der Entwicklungsumgebungskonfiguration (config/dev.env.js) fest Alle Anfragen, die mit /apidomain beginnen, werden über den npm run dev-Server, der von express gestartet wurde, an die Zielschnittstelle umgeleitet.

Offizielle Dokumentation: https://vuejs-templates.github.io/webpack/proxy. html

proxyTable: {
  '/apidomain':{
  target:'http://localhost:prot',//或ip或域名。
  changeOrigin:true,
  pathRewrite: {
   '^/apidomain': ''
  }
  }
 },

Um über IP auf h5 im LAN zuzugreifen, fügen Sie beim Starten des Entwicklungsservers den Parameter host hinzu

Das heißt, die Dev-Befehlskonfiguration von package.json lautet wie folgt

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

Deaktivieren Sie die Chrome-Sicherheitsrichtlinie, um eine domänenübergreifende Funktion zu erreichen

Erstellen Sie eine neue Bat-Datei in Windows und fügen Sie den folgenden Befehl ein, um sie in diesem Modus zu öffnen

cd "C:\Program Files (x86)\Google\Chrome\Application" 
chrome.exe --disable-web-security --user-data-dir=c:/CorsUserData

CORS auf dem asp.net-Core-Server Domänenübergreifende Einstellungen

Offizielle Dokumentation: https://docs.microsoft.com/zh-cn/aspnet/core/security/cors

In der tatsächlichen Einstellung, weil in h5 das Hinzufügen der Header-Parameter am Ende erzeugt wurde 预检(OPTIONS)请求 Nachdem ich den obigen Artikel gelesen hatte, änderte ich die allgemeinen Parameter in die Abfrageparameter

1. CORS-Dienst hinzufügen

public void ConfigureServices(IServiceCollection services)
{
 //若只有部分接口则定义一个或多个命名的 CORS 策略，并在运行时按名称然后选择的策略,通过特性标记去设置跨域 详情见文档
 services.AddCors();
}

2. Middleware aktivieren

//读取配置文件中设置的允许跨域的域名 CorsOrigins为一个数组 设置["*"]则会允许所有
var origins = Configuration.GetSection("CorsOrigins").GetChildren().Select(s => s.Value).ToArray();
app.UseCors(e =>
{
 e.WithOrigins(origins).AllowAnyHeader().AllowAnyMethod().AllowCredentials();
});

rrree

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein die Zukunft.

Verwandte Artikel:

Neue Funktionen der Webpack 4.0.0-Beta.0-Version (ausführliches Tutorial)

Verwenden von SpringMVC zum Lösen Vue-Cross-Connection-Domain-Anfrage

Der Lebenszyklus von Vue-Komponenten und Route (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonProbleme bei der domänenübergreifenden Vue-Verarbeitung (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!