Nginx configures proxy to solve the cross-domain problem of front-end request and back-end service

As we all know, when the front-end page domain name port is different from the back-end service domain name port , the request will cross domains.
At this time, in addition to the back-end language to solve, you can also configure nginx proxy to solve cross-domain.

The configuration logic is as follows:

server {
    
    
     listen 8086;     #1.你想让你的这个项目跑在哪个端口
     server_name 192.168.3.77;     #2.当前服务器ip

     location / {
    
    
        root   D:/project/UniApp/unpackage/dist/build/h5/;     #3.dist文件的位置(根据自己dist包放置的位置决定) 
        try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写，history和bash通用，这里配置主要是兼容history模式，进行一个404的重定向)
     }

     location /dev-api/ {
    
    
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://192.168.207.109:18080/;
     }
 }

This is the regular configuration of the vue project, and the second location is the configuration of the nginx proxy. At this time, the back-end service domain name port of the
last packaged front-end project is configured as /dev-api/ , then the browser network
displays the request.