html - How to use AngularJS to get JSON from external URL and display in page - Resource interpreted as Script 但使用 MIME 类型 text/html 传输

标签 html json angularjs url jsonp

我正在尝试对 URL 进行 http 调用以获取 JSON 并将其显示在我的页面上。

JSON 看起来像这样:

{"ticker":{"high":484.01099,"low":470.37201,"avg":477.1915,"vol":2193393.03322,"vol_cur":4588.62668,"last":482.16,"buy":482.16,"sell":481.2,"updated":1398350394,"server_time":1398350394}}

代码如下。我读到我必须使用“JSONP”,但我不知道如何使用它。

<html ng-app>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.min.js"></script>
        <div id = "content" style="min-width: 1200px; max-width: 90%: margin-left: auto; margin-right: auto;">
            <div style="width: 520px; float: left;">
                <h4>Bot Summary:</h4>
            </div>
            <div  ng-controller="TickerControl" style="width: 680px; float: left;">
                <h4>Market Summary</h4>
                <p>Price = {{data}} </p>
            </div>
        </div>
        <div></div>

        <script type="text/javascript">

            function TickerControl($scope, $http, $templateCache) {
                $scope.method = 'JSONP';
                $scope.url = 'https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK';

                $scope.getTicker = function() {
                  $scope.code = null;
                  $scope.response = null;

                  $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
                    success(function(data, status) {
                      $scope.status = status;
                      $scope.data = data;
                    }).
                    error(function(data, status) {
                      $scope.data = data || "Request failed";
                      $scope.status = status;
                  });
                };

                            $scope.getTicker();
            }

        </script>

    </body>
</html>

更新

我现在已经修改了我的代码来尝试执行 JSONP 请求。我收到以下错误:

Resource interpreted as Script but transferred with MIME type text/html: "https://btc-e.com/api/2/btc_usd/ticker?callback=angular.callbacks._0". angular.js:8582
Uncaught SyntaxError: Unexpected token : ticker:1

我好像收到短信了。由于我无法控制服务器响应,我如何将此文本解析为 JSON...或者只是显示它...它可以在 chrome 开发环境中查看。

更新 2

显然这似乎是服务器未正确配置的问题。因为我无权访问它,所以能够只接收文本并在客户端中解析它会很好!

最佳答案

在用不同的方法做了更多的研究和试验之后,我很遗憾地通知你,你想要达到的目标无法实现。

我向 https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK 发送了一个 GET 请求用于测试目的,在响应 header 中它说

content-type → text/html; charset=utf-8

因为做跨域调用,没有权限访问服务器,所以不得不使用jsonp。但是 jsonp 不适用于 text/html 内容。这与错误有关

Resource interpreted as Script but transferred with MIME type text/html

因此,即使响应看起来像有效的 JSON,您的客户端应用程序也不会这样对待它。

要解决此问题,您必须在服务器上添加正确的 Content-Type header ,但您无权访问它。

引自 this related question :

jsonp can only be used if and when the server properly embed the response in a javascript function call.


总结一下:

你应该

  • 通过配置服务器允许跨域调用
  • 通过配置服务器发回正确的内容类型 header

很遗憾,您无法访问服务器。

请注意,这不是您的错。这是因为服务器没有配置好。

关于html - How to use AngularJS to get JSON from external URL and display in page - Resource interpreted as Script 但使用 MIME 类型 text/html 传输,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23268751/

相关文章:

javascript - 为什么应用程序启动时 android webview 在 HTML5 上得到错误的宽度

json - 如何添加一个新的 {key :value} per array element merging others identically structured JSON with jq

javascript - GET 请求 200 转 json

ios - swift API 请求和 JSON 解析

javascript - x 可编辑行内的可编辑 list

AngularJS $http,错误处理,拦截器和响应状态码 0

javascript - 使用 slideToggle() 固定位置以将内容向下推

html - 如何根据 RegEx 模式将文件拆分为多个文件?

javascript - Angular 拦截器 - 从 500 错误获取消息

html - 将 HTML 表单分为两部分