仅支持跨源请求答案

【问题标题】：Cross origin requests are only supported仅支持跨源请求
【发布时间】：2019-01-18 12:32:14
【问题描述】：

当我点击下面代码中的链接时：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<div id="modal_open" class="modal fade" role="document">
    <div class="modal-dialog custom-modal-size">
        <div class="modal-content">
            text
        </div>
    </div>
</div>

<a href="javascript:void(0);" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

如果我打开了 chrome 调试器，我会收到 jquery.min.js:4 XMLHttpRequest cannot load javascript:void(0);. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 消息。虽然代码按预期工作，但我试图了解为什么会收到此消息。谁能解释一下？

【问题讨论】：

请显示完整的错误信息。
@Lambda Ninja 好的，已更新。
设置 HTTP XSS 标头后重试。了解更多：stackoverflow.com/questions/9090577/…
@Hari Harker 感谢您的帮助！我添加了以下 PHP 行：header("X-XSS-Protection: 0"); 但我仍然收到错误消息。
“XMLHttpRequest cannot load javascript:void(0)” – 您的脚本/系统认为 javascript:void(0) 是它应该通过 AJAX 请求加载的实际 URL，这使得当然没有任何意义。问题是，那首先在那里做什么？

标签： javascript css cross-domain

【解决方案1】：

在您的链接标签中，您有href="javascript:void(0);"，它会引发错误。如果你删除它，错误就消失了。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<div id="modal_open" class="modal fade" role="document">
    <div class="modal-dialog custom-modal-size">
        <div class="modal-content">
            text
        </div>
    </div>
</div>

<a data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

【讨论】：

谢谢！我应该用什么代替javascript:void(0);？
我刚刚发布了没有它的情况。你还想让它做什么？
此解决方案的问题在于，如果您需要在链接中添加标签（可访问性标准要求这样做），则删除 href 属性会破坏该链接。我建议使用href="#" 并遵循@irfandar 的回答。

【解决方案2】：

您可以将 href 设置为 # 并将 onclick 设置为 event.preventDefault() 或 return false 以实现类似的效果

<a href="#" onclick="return false;" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

或

<a href="#" onclick="event.preventDefault()" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

【讨论】：

【解决方案3】：

href="javascript:void(0);"

导致它

【讨论】：

抱歉没有看到有人已经发布了正确答案。它没有被接受。感到羞耻。

【解决方案4】：

您是否使用 Chrome 并从您的文件系统打开了 html 脚本？

Firefox 或网络服务器应该解决这个跨源问题。

【讨论】：

感谢您的帮助！我在 localhost 上运行它。