About Nginx configuration Vue, nuxt request proxy configuration

foreword

In the current front-end and back-end separation projects, the startup port numbers of the front and back ends are different, which will cause this problemcross-domain issues

So how to solve the cross-domain problem?

Answer: At present, there are about 3 cross-domain solutions, front-end configuration, back-end configuration, and Nginx. Here we only talk about the configuration of nginx. In the vue project, we can configure it in the nginx.conf file of nginx. As for how Configuration, you can combine your own front-end vue project to create a dist file to configure according to my configuration file.

The front-end and back-end projects (VUE projects) are configured as follows:

        // 这个是前后端分离项目的 代理设置
        // 含义是：将所有 配置好的nginx监听端口号的请求都跳转到该目录下 的某个设置的文件
        location / {
    
    
            root   /www/gmi/zhongxiaowei/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

Microservice nginx
In microservice projects, we can use nginx to do multiple servicesmiddlemanAccess and collaboration between multiple services is realized through this middleman. The configuration is as follows:

	
	#这里用来配置科艺云课堂的请求转发
		server {
    
    
        listen       9090;
        server_name  localhost;
		
		location ~ /eduservice/ {
    
    
				proxy_pass http://localhost:8001;
        }
        location ~ /edu_oss/ {
    
    
				proxy_pass http://localhost:8002;
        }
		location ~ /eduvod/ {
    
    
				proxy_pass http://localhost:8003;
        }
		location ~ /cmsservice/ {
    
    
				proxy_pass http://localhost:8004;
        }
		location ~ /msmservice/ {
    
    
				proxy_pass http://localhost:8005;
        }
		location ~ /serviceUcenter/ {
    
    
				proxy_pass http://localhost:8160;
        }
		location ~ /staservice/ {
    
    
				proxy_pass http://localhost:8008;
        }

    }

The front-end and back-end projects (Nuxt projects) are configured as follows:

Note: The nuxt front-end project runs as a service, and needs to request the request address of the front-end. All here we can use nginx as a request proxy configuration to access our front-end pages and avoid our port exposure

		// 含义为：将所有的默认请求 都请求代理到http://47.96.115.67:3000/;
        location / {
    
    
            proxy_pass  http://47.96.115.67:3000/;
        }
        
        location /api/ {
    
    
            proxy_pass  http://47.96.115.67:9091/;
        }

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    
    
    worker_connections  1024;
}


http {
    
    
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

	//配置nginx的监听端口号
    server {
    
    
        listen       80;
        server_name  47.96.115.67;

        #charset koi8-r;
        charset utf-8;

        #access_log  logs/host.access.log  main;

        # 这个是中小微企业人才管理系统的前台 代理设置
        # location / {
    
    
        #     root   /www/gmi/zhongxiaowei/dist;
        #     index  index.html index.htm;
        #     try_files $uri $uri/ /index.html;
        # }
        
        location / {
    
    
            proxy_pass  http://47.96.115.67:3000/;
        }
        
        location /api/ {
    
    
            proxy_pass  http://47.96.115.67:9091/;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
    
    
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
    
    
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
    
    
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    
    
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    
    
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    
    
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    
    
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}