【问题标题】:Cannot use url to navigate in react through nginx无法使用 url 导航通过 nginx 做出反应
【发布时间】:2019-11-11 09:32:17
【问题描述】:

我正在使用 nginx(反应前端)提供我的静态文件。 我为每个页面使用了不同的网址,例如 /login /user /home。

我的 nginx 不会将这些重定向到我的 index.html 文件。

我做了一些更改,现在我也无法访问我的主页。它返回无法获取 /。

这是我的 nginx.conf 文件。我在 Windows 上运行它。我的 index.html 在 build 文件夹中。如何让我的nginx在reactjs中使用Router和Link,这样我可以通过引用链接或者导航栏来获取页面?

worker_processes  5;

events {
    worker_connections  1024;
}


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

    sendfile        on;
    keepalive_timeout  65;


    server {
        listen   80;
        server_name  ip;

        location / {
            root   /Users/username/projectfolder/build;    
            index  index.html index.htm;
            try_files $uri $uri/ index.html;
            proxy_pass http://ipaddress:portnumber;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
         }
     }
 }

更新:

我试过下面的配置

server {
        listen some_port;
        server_name some_ip;
        root C:\\nginx-1.17.1\\build\\;
        index  index.html index.htm;
        location /test/ {   
            alias C:\\nginx-1.17.1\\build\\;
            index  index.html index.htm;
            try_files $uri \\index.html;
            #internal;

            #return index;
        }
        location = /index.html {
        # no try_files here
        return 502;
    }
        location / {  
            #root   C:\\Users\\DEV-a0a02yc\\insurance_automation\\build;
            try_files $uri $uri\ \index.html?$args;
            #try_files $uri/ index.html;
            proxy_pass http://some_ip:some_port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }

在 /test/ url 中,我得到一个空白页和一个重写/内部重定向错误说:

2019/07/01 09:53:22 [error] 17820#18008: *1 rewrite or internal redirection cycle while internally redirecting to "/favicon.ico\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html"

这是我的网络标签:

如何在此处提供我的 index.html 文件以在输入此 url 时处理重定向?

【问题讨论】:

    标签: reactjs nginx nginx-location nginx-config


    【解决方案1】:

    您的配置中的代理线路是什么?

    您不应该从 html 文件中提供服务还是代理传递到不同的地址?

    我建议尝试从配置中删除代理行。

    另外,proxy_pass 行无效。服务器地址“ipaddress”是一个很长的延伸(虽然不是不可能的 dns),端口“portnumber”肯定是无效的。

    所以最低配置要求如下:

    location / {
        root /folder/subfolder/build;
        try_files $uri /index.html;
    }
    

    root 定义你的 react 构建文件夹位置,try_files 定义 nginx 应该查看请求的文件是否存在,如果不存在,它会服务于 index.html

    【讨论】:

    • ipaddress 和端口号表示我原始文件中的数字。我只是在这里给出了它们以供参考。并且删除代理行不起作用。通过nginx在react中启用路由使用的一般方法是什么?
    • 我已经为我的答案添加了所需的最小配置,root 选项指向您的 react 构建位置,try_files 选项首先查看 uri 中请求的文件是否存在,如果不存在,它将提供index.html.
    • 这就是问题所在,网址显示 404 消息,我刚刚尝试将 location / 替换为 location * 并且它起作用了,然后当我重新启动它时,它又停止了。
    • location / 应该匹配所有 url(location = / 只匹配 root)所以这不应该是问题。
    • 我想要的是当我输入一些东西/登录时,我应该去登录现在如果我点击登录按钮它确实会把我带到那个页面但是如果我输入相同的内容并按回车我得到 404 nginx 错误。此外,有趣的是,所有这些都适用于 localhost,但不适用于我指定的 ip。
    猜你喜欢
    • 2018-09-09
    • 2022-01-19
    • 2015-04-14
    • 2022-08-03
    • 1970-01-01
    • 1970-01-01
    • 2019-11-16
    • 2021-07-25
    • 2021-09-13
    相关资源
    最近更新 更多