Question

我正在尝试使用Backbone.js创建单页面应用程序，点击“主页”选项卡时，应将与模型关联的页面加载到div＃content1中。代码适用于本地文件夹中的页面但是如果我想加载外部页面，例如“https://www.google.com”，那么我会收到错误“跨源请求被阻止：同源策略不允许在https://www.google.com/读取远程资源。可以通过将资源移动到同一域或启用CORS来解决此问题。“如何解决此问题或如何将外部URL与骨干路由器链接？

<!DOCTYPE html>
<html><head>
    <title>DEMO</title>
    <script src="jquery-2.0.3.min.js" type="text/javascript" ></script>
    <script src="underscore-min.js" type="text/javascript" ></script>
    <script src="backbone-min.js" type="text/javascript" ></script>
    <script type="text/javascript">
        $(function($) {

          var modelhome = new Backbone.Model({name: 'Home', page: 'https://www.google.com'});
          var Router = Backbone.Router.extend({
                routes: {
                "home": "Homeclick"
                },
                Homeclick: function() {
                new ExpandableView({model: modelhome, el: $('#mainbox')}).render();
                }
          });
          var ExpandableView = Backbone.View.extend({
                render: function() {
                this.$el.load(this.model.get('page'));
                return this;
                }
          });
          var route = new Router();
          Backbone.history.start({ pushState: false });
          });
    </script>


</head>
<body>
    <div class="container" >
       <nav style="width:100%" role="navigation" >
        <ul>
          <li><a href="#home">HOME</a></li>
        </ul>
       </nav>
    <div  id="mainbox" style="position:absolute; top:20%; left:10%; width:50%; height:100%; overflow:hidden;border:2px solid #000000;" >
    </div>
   </div>

 </body>
</html>

骨干路由，CORS问题

0 个答案: