Comment nginx résout les problèmes inter-domaines

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 front-end, laissez nginx pointer vers des ressources statiques et nginx transmet demandes d'arrière-plan.

1. Packagez le code front-end :

npm run build

générera un dossier dist. Contient un fichier index.html et un dossier statique. Prenons mon chemin local comme exemple :

/Users/xxx/ideaProjects/webtest/dist

Ouvrir

. nginx.conf dans le répertoire /usr/local/etc/nginx, 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 le redirige vers http://localhost/api/demo/1, et l'accès réel est http://localhost:8080/demo/1.

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

Plus Concernant Nginx Pour les articles techniques, veuillez visiter la colonne Tutoriel Nginx pour apprendre !

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!