目前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.css
和example.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点,所以它必须像这样工作,我不能分割任何东西,所以请把这些评论和建议留在这个问题之外。
1条答案
按热度按时间ifmq2ha21#
问题原因:
这个问题的发生是因为你直接提到了你的docker容器的文件路径。当浏览器尝试加载它们时,它将使用
domain
与这些文件连接。因此,如果你试图加载docker容器的
/js/test.css
,它将使用www.example.com
(像往常一样)作为基本URL来获取,这就是失败的地方。这个问题有很多答案,改变后端,前端,nginx配置等。
在要渲染到
/other-frontend/
路由的HTML文件的<head>
标记中添加<base href="/other-frontend/">
。注意:在导入js和CSS文件的脚本和链接标签之前添加上述标签***