react或vue项目部署到nginx服务器、history路由模式、nginx代理解决跨域的配置

需求：

后台服务地址：http://127.0.0.1:5000

前端地址：http://127.0.0.1 （history路由模式）

前端向后台发送请求的地址：http://127.0.0.1/api

配置：

 

 nginx.conf配置文件：

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

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		#location / {
        #   root   html;
        #   index  index.html index.htm;
        #}

		#hash模式路由
        #location / {
        #   root   D:/nginx-1.20.1/html/test;
        #   index  index.html index.htm;
        #}
		
		#history模式路由
        location / {
            root   D:/nginx-1.20.1/html/test;
			try_files $uri /index.html;
        }
		
		#后台服务,匹配的api不代理走
		location /api/ {
			proxy_pass http://127.0.0.1:5000/;
        }

        #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;
        }

    }

}