nginx 当我重新加载React应用程序时,它没有加载并抛出404错误

wn9m85ua  于 2023-04-05  发布在  Nginx
关注(0)|答案(1)|浏览(156)

最初,我们使用开源解决方案进行了广泛的研究和实验来解决这个问题。举个例子,域名“https://example.com”在我们的托管服务器上与nginx无缝地工作。然而,当试图访问某些应用程序路由时,如“https://example.com/terms”或“https://example.com/privacy”,我们遇到了404错误,指示未找到应用程序。

gj3fmq9x

gj3fmq9x1#

基本上React是一个单页应用程序,当我们试图加载其他/terms或/privacy时,它指向其他位置,然后我们改变了nginx的配置
下面是nginx的配置:

# nginx server configuration 
server {
    listen      0.0.0.0:443 ssl;
    server_name example.com www.example.com;
    ssl_certificate      /home/admin/conf/web/ssl.example.com.pem;
    ssl_certificate_key  /home/admin/conf/web/ssl.example.com.key;
    error_log  /var/log/apache2/domains/example.com.error.log error;
    access_log  /var/log/apache2/domains/example.com.log combined;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $remote_addr;
        client_max_body_size 50M;

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin: $http_origin');
            add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
            add_header 'Access-Control-Allow-Credentials: true');
            add_header 'Vary: Origin');
        }

        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;

        # point out to your react application of build folder in your production
        root /usr/local/html;
        index index.html;
        try_files $uri /index.html$is_args$args;
    }

}

相关问题