如何将html加载到页面而不会收到跨站点请求错误

我正在尝试在我的机器上创建一个 Web 应用程序。以下是相关部分：

索引.html：

<!DOCTYPE html>
<html lang="en">
  <body>
    <!--- empty placeholders for external HTML-->
    <div id="welcome"></div>
    <div id="dinnerOverview"></div>
    <div id="sidebar"></div>
    <!-- The application JavaScript code -->
    <script src="js/model/dinnerModel.js"></script>
    <script src="js/app.js"></script>
    <script src="js/view/sidebarView.js"></script>
    <script src="js/controllers/sidebarController.js"></script>
    <script src="js/controllers/generalController.js"></script>
  </body>
</html>

js/app.js：

$(function() {
    //We instantiate our model
    var model = new DinnerModel();
    // We instantiate the general controller
    var generalController = new GeneralController();
    // And create the instance of the view
    var sidebar = $("#sidebar");
    var sidebarView = new SideBarView(sidebar, model); 
    //add sidebarView to general controller
    generalController.addView(sidebarView);
    //instantiate sidebar controller
    var sidebarController = new SideController(sidebar, model);
});

js/views/sidebarView.js：

var SideBarView = function(container, model){
    var container = container;
    var model = model;
    container.load("sidebar.html");
}

最后一行出现错误：

jquery.js:9631 Failed to load file:///Users/sahandzarrinkoub/Documents/Programming/DH2642/dinnerplanner-html/sidebar.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

怎么办呢？我看不出这甚至是一个跨源请求？

我设法通过托管带有我的文件的服务器来解决错误。

在项目目录中创建package.json并将其粘贴到其中：

{ "name": "Demo", "version": "1.0.0", "description": "demo project.", "scripts": { "lite": "lite-server --port 10001", "start": "npm run lite" }, "author": "", "license": "ISC", "devDependencies": { "lite-server": "^1.3.1" } }
使用终端进入文件夹并运行npm install 。
运行npm start .

现在，该项目可以在localhost:10001

访问

相关内容

最新更新

热门标签：