nginx 如何让index.html指向反向代理的子位置中的正确路径?

brqmpdu1  于 2023-05-16  发布在  Nginx
关注(0)|答案(1)|浏览(249)

目前Nginx的设置如下:

upstream docker-frontend-1 {
    server 0.0.0.0:8000;
}

upstream docker-frontend-2 {
    server 0.0.0.0:9000;
}

server {
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;
    server_name example.com;

    location / {
        // working
    }

    location /other-frontend/ {
        proxy_pass http://docker-frontend-2/other-frontend/;
        proxy_redirect http://docker-frontend-2 http://$lanIP$/other-frontend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_cache_bypass $http_upgrade;
        proxy_connect_timeout 150;
        proxy_send_timeout 100;
        proxy_read_timeout 100s;
    }
}

在第二个前端的index.html中,它运行在docker容器中,与第一个前端相同,我引用了一个脚本和样式表文件,如下所示:

<link rel="stylesheet" type="text/css" href="/js/test.css" />
<script type="application/javascript" src="/js/test.js"></script>

然而,现在它试图访问example.com/js/test.cssexample.com/js/test.js上的这些文件,而它们位于与第一个前端不同的Docker容器中。这个docker容器在example.com/other-frontend/下运行,如上面的nginx配置所示。
这给我的错误
拒绝应用“https://example.com/js/test.css”中的样式,因为其MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查。

拒绝执行“https://example.com/js/test.js”中的脚本,因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查。
这是有道理的,因为这些文件确实不在那个位置,而是在我反向代理的docker容器中。

我的问题是,我如何才能使样式表,脚本和其他文件仍然在适当的docker容器中调用?

P.S.我不能为它设置两个DNS点,所以它必须像这样工作,我不能分割任何东西,所以请把这些评论和建议留在这个问题之外。

ifmq2ha2

ifmq2ha21#

问题原因:

这个问题的发生是因为你直接提到了你的docker容器的文件路径。当浏览器尝试加载它们时,它将使用domain与这些文件连接。
因此,如果你试图加载docker容器的/js/test.css,它将使用www.example.com(像往常一样)作为基本URL来获取,这就是失败的地方。
这个问题有很多答案,改变后端,前端,nginx配置等。

    • 最简单的修复**是:

在要渲染到/other-frontend/路由的HTML文件的<head>标记中添加<base href="/other-frontend/">
注意:在导入js和CSS文件的脚本和链接标签之前添加上述标签***

相关问题