使用 jQuery 更改 href 链接导致 CORS 策略阻塞答案

【问题标题】：Using jQuery to change href link causes CORS policy Blocking使用 jQuery 更改 href 链接导致 CORS 策略阻塞
【发布时间】：2019-04-01 05:10:09
【问题描述】：

我正在开发一个在用户向下滚动时动态添加内容的网页。作为此过程的一部分，我将添加已添加到 DOM 的“a”元素，然后我想动态地为它们提供一个 href 链接。问题是我从 Google Chrome 收到此错误。

从源“http://localhost”访问“https://www.youtube.com/watch?v=K4NRJoCNHIs”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

跨域读取阻止 (CORB) 阻止了 MIME 类型为 text/html 的跨域响应 https://www.youtube.com/watch?v=K4NRJoCNHIs。详情请见https://www.chromestatus.com/feature/5629709824032768。

这是导致此问题的代码示例。

article.find('a').each(function() {
     $(this).attr("href", "https://www.youtube.com/watch?v=K4NRJoCNHIs");
     $(this).attr("target","_blank");

当我运行调试器时，我看到 href 属性已成功更改，但 Chrome 不久后抛出错误并完全删除该元素。

我不明白如何动态添加链接会破坏 CORS 政策。如果有人有任何建议来防止错误出现或有更好的方法来动态编辑 href 属性，请告诉我。

谢谢！

编辑：

我解决了这个问题！在被告知 javascript 必须在我不知道的情况下发出 XMLHttpRequest 并考虑了我正在使用的库之后，我意识到 jScroll，当用户滚动到底部时我用来向页面添加内容的库，确实会生成 GET请求页面上最后一个'a'标签的href。这是有道理的，因为要正常使用 jScroll，最后一个“a”标签应该有一个指向您要加载的下一个 html 页面的 href。感谢大家的帮助！

【问题讨论】：

考虑到使用例如 Angular 构建的页面中的每个链接都是通过 javascript 动态生成和添加的，我认为动态添加到页面的链接不会造成 cors 问题。可能是 Chrome 或您使用的某些扩展程序阻止了该行为，因为当您尝试用指向同一 youtube 视频的链接替换页面中的每个链接时，它可能看起来像浏览器劫持。只是一个想法，可能值得谷歌搜索。
链接不使用XMLHttpRequest，javascript 使用
嗯，我刚刚在 Firefox 中测试了该站点，我没有任何扩展，但我仍然收到“Cross-Origin Request Blocked”错误。那么，当我只是在编辑元素的 href 时，为什么 javascript 会生成 XMLHttpRequest？
charlietfl，感谢您的帮助，我能够解决问题。谢谢！我留下了一条解释发生了什么的编辑。
如果您解决了问题，请将其添加为答案，而不是更改您的问题。该解决方案不构成原始问题的一部分！这是一个问答网站，所以请按照格式。您可以回答自己的问题，其他人也可以对该答案进行投票……所以这符合您的利益:-)。谢谢

标签： javascript jquery

【解决方案1】：

我会回答我自己的问题，因为这里的出色帮助让我找到了问题所在！更改 href 不应该在链接上发出 GET 请求。所以，我寻找可能有其他代码可以尝试访问 href 的地方。我发现 jScroll 试图使用“a”标签来生成新的页面内容，结果 jScroll 在链接被更改时发出 GET 请求。

【讨论】：