Question

在Angular2我正在向Indeed求职API发送获取请求以获取作业列表但我收到以下错误：

拒绝执行脚本＆＃39; http://api.indeed.com/ads/apisearch?publisher=＆安培; Q = Java和安培; L =＆奥斯汀放大器; V = 2及格式= JSON＆＃39; 因为它的MIME类型（＆＃39; application / json＆＃39;）不可执行，并且启用了严格的MIME类型检查。

我的组件中的代码是：

import { Component } from '@angular/core';
import { Headers, Jsonp, URLSearchParams } from '@angular/http';

@Component({
    templateUrl: 'jobs.html'
})
export class JobsPage {

    constructor(
        private jsonp: Jsonp
    ) { }

    private headers = new Headers({ 'Content-Type': 'application/json' });

    ngOnInit() {

        this.jsonp.get('http://api.indeed.com/ads/apisearch?publisher=<my_publisher_id>&q=java&l=austin&v=2&format=json', { headers: this.headers })
            .map(res => res.json())
            .subscribe((data) => {
                console.log(data);
            },
            (e) => { console.log(e); }
            );
    }
}

Answer 1

JSONP通常使用callback参数指向执行结果的全局方法，该方法应该是使用Content-Type: application/javascript返回的JavaScript脚本。

这没有记录，但是从源代码我们推断您需要添加另一个带有文字值的参数：

&callback=JSONP_CALLBACK

如果没有此参数，Indeed API将返回application/json。添加它，您就会获得application/javascript。

另外，请删除您要添加到请求中的标题Content-Type，因为不发送任何内容都不会对其进行调用。这不会影响响应，只会解释请求的方式。（随着时间的推移，JSONP不接受任何标头，无论实现如何。）

来源：jsonp_backend.ts

<强>更新

因为Angular Jsonp为回调生成一个复合名称（object.method），并且我们想要完成任务，所以解决方案是使用第三方库来处理jsonp。

这是一个简单的问题：https://github.com/camsong/fetch-jsonp

fetchJsonp('http://api.indeed.com/ads/apisearch?publisher=<my_publisher_id>&q=java&l=austin&v=2&format=json')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

请注意，您无法使用JSONP发送标头。 Angular的Jsonp对此有误导性。你有一个承诺，而不是一个可观察的。

使用JSONP从外部URL获取JSON时出现Angular2错误

1 个答案: