Comment résoudre le problème inter-domaines de Nginx

Séparez le front-end et le back-end, utilisez nginx pour résoudre les problèmes inter-domaines

Front-end : vue.js+nodejs+webpack

Backend : springboot

Serveur proxy inverse : nginx

Idée : emballez le code frontal, laissez nginx pointer vers des ressources statiques et nginx transmet les requêtes en arrière-plan.

1. Packagez le code frontal :

npm run build

générera un dossier dist. Contient un fichier index.html et un dossier statique. Le chemin est mon chemin local :

/users/xxx/ideaprojects/webtest/dist

2 , ouvrez nginx.conf dans le répertoire

/usr/local/etc/nginx et ajoutez ce qui suit au serveur :

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 # 🎜🎜#

Le front-end envoie une requête : http://localhost/test, vue-router la redirige vers http://localhost/api/demo/1, et l'accès réel est http://localhost:8080/demo/1.

Envoyer une demande directement en arrière-plan : visitez http://localhost/api/demo/1, la visite réelle est : http://localhost:8080/demo/1

# 🎜🎜# Réflexions sur l'expansion du contenu :

1).

# Interface du serveur proxy

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

L'adresse de l'interface proxy n'atteint que 8080 , alors il Le nom du projet d'arrière-plan sera-t-il automatiquement ajouté ? ? ? Par exemple, l'interface est http://148.70.110.87:8080/project name/method name. . .

2).js est demandé comme ceci. nginx est configuré selon votre ci-dessus, mais l'erreur de demande est http://148.70.110.87/api/index2 404 (introuvable)

.

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

3). La troisième étape est le test, je n'arrive vraiment pas à le comprendre. Ce serait génial s'il y avait du code pertinent

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!