Mailchimp 嵌入表单导致我自己的 CSS 和 JS 文件出现 404 错误

Posted 2023-03-24

【中文标题】Mailchimp 嵌入表单导致我自己的 CSS 和 JS 文件出现 404 错误

【英文标题】：Mailchimp embed form is resulting in 404 errors from my own CSS and JS files

【发布时间】：2019-12-02 14:17:14

【问题描述】：

我正在尝试将 Mailchimp 的嵌入表单放置在使用车把部分的网站上，但这会导致我之前工作的 javascript 和 css 文件返回 404。

我尝试将表单放在它自己的部分车把上，但它总是正确加载，但为我的 js 和 css 文件返回“net::ERR_ABORTED 404 (Not Found)”。嵌入表单使用一个 css 链接标签、它自己的样式标签和两个脚本标签。

<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup 
        background: #fff;
        clear: left;
        font: 14px Helvetica, Arial, sans-serif;
    

    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
  We recommend moving this block and the preceding CSS link to the HEAD of your html file. */
</style>
<div id="mc_embed_signup">
    <form
        action="RemovedSiteURL"
        method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
        novalidate>
        <div id="mc_embed_signup_scroll">
            <h2>Subscribe</h2>
            <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
            <div class="mc-field-group">
                <label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
                </label>
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
            </div>
            <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text"
                    name="b_0aeb9493b3fec38b23388f11b_6846240915" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"
                    class="button"></div>
        </div>
    </form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script
    type='text/javascript'>(function ($)  window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; fnames[3] = 'ADDRESS'; ftypes[3] = 'address'; fnames[4] = 'PHONE'; ftypes[4] = 'phone'; (jQuery)); var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

预期：将 Mailchimp 嵌入代码放入我用车把制作的已经可以使用的页脚部分中，这样就可以了。

实际：Mailchimp 的表单正确加载它的脚本，但我自己的 js 和 css 文件返回“net::ERR_ABORTED 404 (Not Found)”。

网络标签的图片：https://imgur.com/a/H4zIVTg

【问题讨论】：

看起来 mailchimp 样式表 (Classic-10_7) 正在获取 307（临时重定向）并且未加载，并且在其后面排队的其余文件只是等待。您可能想看看 Express 更喜欢如何处理静态文件。 expressjs.com/en/starter/static-files.html

嗨瑞恩，感谢您的帮助。如果我理解您在说什么，那么错误在于 Mailchimp 的 css 链接，而不是我的静态文件。我想我应该联系 Mailchimp 以找出链接重定向的原因。我猜你的意思是我可以改变我的文件的服务方式，以确保它们即使没有 Mailchimp 的 css 文件也能加载？

不完全-我的意思是 express.js 希望您以不同的方式包含指向文件的链接...但是您也可以确保首先加载文件（将它们放在代码中的 mailchimp 文件之前...您可能仍然会收到错误消息，但您的文件已经加载。否则我的第一条评论中的链接可能会对您有所帮助 - 请尝试按照这些步骤快速获取以允许加载 mailchimp 文件。

【参考方案1】：

尝试将协议https: 部分添加到 css 和 js 包括：

<link href="https://cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>