☰

Nginx 反向代理无法显示幻灯片/横幅

tag-icon • tag-icon nginx reverse-proxy
Nginx 反向代理无法显示幻灯片/横幅

我遇到了 nginx 反向代理的问题，除了一些未显示的图像（幻灯片/轮播/横幅上的图像）外，其他一切都正常。其他图像显示正常。我不知道问题是否与 javascript 有关，这是我的配置。

server {  
    listen 80;  

    server_name example.net;  

    location / {  
        proxy_pass http://example.com;  
        proxy_set_header Accept-Encoding "";  
        sub_filter "http://example.com/" "http://example.net/";  
        sub_filter 'href="http://example.com/' 'href="http://example.net/';  
        sub_filter 'src="http://example.com/' 'src="http://example.net/';  
        sub_filter 'action="http://example.com/'         'action="http://example.net/';  
        sub_filter_once off;  
        proxy_set_header X-Real-IP $remote_addr;  
        proxy_set_header X-Forwarded-Host $host;  
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
    }
}

因此我发现问题出在 example.com 的代码中，如下所示

<div id="bannerSlider" style="display:none" v-show="bannerShow">
    <div class="kv lazyload" id="mainKv" v-if="bannerLength > 1">
        <div class="owl-carousel owl-theme">
            <template v-for="item in banner">
                <div class="item" v-if="item.TargetLink != ''">
                    <a :href="item.TargetLink" :target="item.PopUpLink ? '_blank':'_self'">
                        <img :src="'/Content/common/images/catch/' + item.ImgId" :title="item.Title">
                    </a>
                </div>
                <div class="item" v-else>
                    <img :src="'/Content/common/images/catch/' + item.ImgId" :title="item.Title">
                </div>
            </template>
        </div>

有人可以帮忙吗？

答案1

首先，您只需要第一个sub_filter语句，因为它涵盖了其余的情况。

其次，您无法可靠地修改 HTML 来更改代码中的域引用，因此您可以预料到随着时间的推移事情会以神秘的方式崩溃。

您可以通过在浏览器中加载页面并通过开发者工具查看浏览器尝试加载的内容来调试此问题。这样您就知道哪里出了问题，然后就可以修复该问题。

相关内容