在 atom 中从 angularjs 调用本地 python 文件

Question

我正在 atom 文本编辑器上进行试验，我遇到了这个问题。

我的代码如下：

这是 html angular 文件 test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="customersCtrl">

    <ul>
      <li ng-repeat="x in myData">
        {{ x.name + ', ' + x.age }}
      </li>
    </ul>

    </div>
  </body>
</html>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get('test.py').then(function(response) {
        $scope.myData = response.data;
    });
});
</script>

和python文件test.py如下

import json

test = [{'name':'sample1','age':'24'},{'name':'sample2','age':'25'}]
print json.dumps(test);

当我在 atom 中打开此浏览器时，出现以下错误。

angular.js:10765 Failed to load file:///Users/harshajasti/Desktop/LibraryApplication/test.py: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我知道我收到错误是因为我正在调用本地文件，但我不知道如何解决这个问题。

Answer 1

使用 http 服务器提供 python 文件。服务器应启用 CORS。您可以从支持 CORS 的 npm 安装基于 nodeJS 的服务器，或者搜索 python2 或 python3（取决于您拥有的）脚本，该脚本将使用 CORS 启动内置的简单 http 服务器header.

简而言之，CORS 是一种限制 Web 服务器之间内容请求方式的方法。如果 header 中没有 CORS 行，浏览器将不允许您从其他服务器请求数据。它与没有 header 的其他服务器有关，而不是您自己的服务器。

有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS。

假设您已安装 npm，这只是一个可能的解决方案，您可以通过搜索找到许多其他解决方案， https://www.npmjs.com/package/http-server

npm i -g http-server    # This will install globally, -g flag
cd /Users/harshajasti/Desktop/LibraryApplication/
http-server --cors

这将打印出其服务地址。而不是请求 file:///Users... 请求，例如 localhost:8888/file.py.

在 atom 中从 angularjs 调用本地 python 文件

call local python file from angularjs in atom

python

angularjs

atom-editor