Javascript Twitter引导js被同源策略阻止，但非引导不是'；T为什么？_Javascript_Html_Twitter Bootstrap

Javascript Twitter引导js被同源策略阻止，但非引导不是'；T为什么？

javascript html twitter-bootstrap

Javascript Twitter引导js被同源策略阻止，但非引导不是'；T为什么？,javascript,html,twitter-bootstrap,Javascript,Html,Twitter Bootstrap,我一直在尝试创建一个需要从另一个网站获取xml数据的网站。到目前为止，仅使用html和javascript（无twitter引导），我就可以访问网站XML并填充选择下拉菜单。以下是非引导html代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script

我一直在尝试创建一个需要从另一个网站获取xml数据的网站。到目前为止，仅使用html和javascript（无twitter引导），我就可以访问网站XML并填充选择下拉菜单。以下是非引导html代码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/getXML.js"></script>
</head>

<body>
    <h1>Test App</h1>
    <button id="button1">submit</button>
    <select id="selectState"></select>
</body>
</html>


测试应用程序
提交

下面是引导html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <!-- jQuery and JavaScript files -->    
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
     <script type="text/javascript" src="js/getXML.js"></script> 
     <script src="js/bootstrap.min.js"></script>   
  </head>

  <div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 col-xs-3">
            <form class = "well">
                <h2 class="page-header">Inputs</h2>
                    <label class="control-label" for="selectState">Select State:</label>
                    <select id="selectState"></select>
                <button type="submit" class="btn btn-default" id="button1" >submit</button>
          </form>
       </div>
    </div>
  </div>
</html>


投入
选择状态：
提交

下面是getXML.js脚本：

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }
        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}

$(document).ready(function(){
    $( "#button1" ).click(function () {         
        aClient = new HttpClient();
        aClient.get('http://www.waterqualitydata.us/Station/search?characteristicName=Caffeine&mimeType=xml&bBox=-92.8,44.2,-88.9,46', function(data) {

            xmlDoc = $.parseXML( data ),
            $xml = $( xmlDoc ),
            $LocName = $xml.find( "MonitoringLocationName" );

            var arr = [];
            $.each($LocName,function() {
                arr.push( $(this).text() );
            });

            for ( var i = 0; i < arr.length; i = i + 1 ) { 
                $('#selectState').append('<option>'+arr[i]+'</option>');
            }

            alert( "success" );

        });
    });
});

var HttpClient=function（）{
this.get=函数（aUrl、aCallback）{
anHttpRequest=newXMLHttpRequest（）；
anHttpRequest.onreadystatechange=函数（）{
如果（anhtprequest.readyState==4&&anhtprequest.status==200）
aCallback（anhtprequest.responseText）；
}
anhtprequest.open（“GET”，aUrl，true）；
anHttpRequest.send（空）；
}
}
$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
aClient=newhttpclient（）；
aClient.get（'http://www.waterqualitydata.us/Station/search?characteristicName=Caffeine&mimeType=xml&bBox=-92.8,44.2，-88.9,46'，功能（数据）{
xmlDoc=$.parseXML（数据），
$xml=$（xmlDoc），
$LocName=$xml.find（“MonitoringLocationName”）；
var-arr=[]；
$.each（$LocName，function（）{
arr.push（$（this.text（））；
});
对于（var i=0；i


现在，当我尝试使用Twitter引导html时，由于同源策略，我得到了一个跨源请求块
没有使用Twitter引导的脚本可以绕过SOP，而Twitter引导版本不能绕过SOP，这有什么原因吗
 修改引导脚本以包含“type”
属性，如下所示：
<script src="js/bootstrap.min.js" type="text/javascript"></script>



这里的“type”参数是键-它允许远程请求发生。CSS和JS被允许进行这种跨域链接，因为W3C认为这是一种低安全风险的链接（至少我上次检查过）
有关CORS的更多信息，请查看以下链接：

IE的解释：
Mozilla的想法：
好的，我想我找到了问题所在。我将
放在
元素中。这显然增加了SOP块。如果没有
元素，则不会引发SOP块
我还没有看到这背后的确切原因，但可能与
元素中烘焙的安全功能有关，因为
元素可以用来传递敏感信息（密码等）？
不幸的是，这似乎没有起到作用。当我检查Firefox调试器的控制台时，仍然会收到一个跨源请求块。还有其他建议吗？对我来说，这似乎是非常奇怪的行为！我会将第二个HTML代码片段中的元素添加到第一个HTML代码片段中，直到您找出问题的根源。元数据，引导CSS，然后是引导脚本。但这些资产都不是遥远的。所以，也许它毕竟在你的JS调用中。。。