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

最新推荐文章于 2025-01-26 15:45:36 发布

原创最新推荐文章于 2025-01-26 15:45:36 发布

· 1.2k 阅读

1 ·

版权

文章标签：

#vue.js #react.js #nginx

Vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

react

2 篇文章

订阅专栏

这篇博客介绍了如何配置Nginx服务器，以实现前端应用（使用history路由模式）与后台服务的交互。配置中，Nginx监听80端口，将历史路由模式的请求指向静态文件目录，而/api路径下的请求则被代理到http://127.0.0.1:5000后台服务地址。这样确保了前端与后台的通信顺畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

后台服务地址：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;
        }

    }

}