So lösen Sie das domänenübergreifende Nginx-Problem

Trennen Sie Front-End und Back-End und verwenden Sie Nginx, um domänenübergreifende Probleme zu lösen.

Front-End: vue.js+nodejs+webpack -End-Code und lassen Sie Nginx auf statische Ressourcen verweisen. Nginx leitet Hintergrundanforderungen weiter.

npm run build

generiert einen dist-Ordner. Enthält eine index.html-Datei und einen statischen Ordner. Nehmen Sie als Beispiel meinen lokalen Pfad:

/ideaprojects/webtest/dist

/usr/local/etc/nginx nginx.conf, fügen Sie Folgendes auf dem Server hinzu:

listen  80; #原为8080，避免冲突，更改为80

  server_name localhost;

 

  #charset koi8-r;

 

  #access_log logs/host.access.log main;

 

 

  location / {

   root /users/xxx/ideaprojects/webtest/dist;

   index index.html;

    

   # 此处用于处理 vue、angular、react 使用h5 的 history时 重写的问题

   if (!-e $request_filename) {

    rewrite ^(.*) /index.html last;

    break;

   }

  }

 

 

  # 代理服务端接口

  location /api/ {

   proxy_pass http://localhost:8080/;# 代理接口地址

  }

Test

Das Frontend sendet eine Anfrage: http://localhost/test, vue-router leitet sie an http://localhost/api/demo weiter /1 , der tatsächliche Zugriff ist http://localhost:8080/demo/1.

Senden Sie eine Anfrage direkt an den Hintergrund: Besuchen Sie http://localhost/api/demo/1, der tatsächliche Besuch ist: http://localhost:8080/demo/1Über eine Inhaltserweiterung nachdenken:

# Die Proxy-Server-Schnittstelle

location /api/ {
proxy_pass http://localhost:8080/;# 代理接口地址
}

2).js wird wie folgt konfiguriert, aber der Anforderungsfehler ist http://148.70.110.87/api/index2 404 (nicht gefunden)

axios.post('/api/index2')
.then( (response) =>{
console.log(response);
})
.catch( (error)=> {
console.log(error);
});

Das obige ist der detaillierte Inhalt vonSo lösen Sie das domänenübergreifende Nginx-Problem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!