拒绝从 URL 执行脚本，因为它的 MIME 类型 ('application/json') 不可执行，并且启用了严格的 MIME 类型检查答案

【问题标题】：Refused to execute script from URL because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled拒绝从 URL 执行脚本，因为它的 MIME 类型 ('application/json') 不可执行，并且启用了严格的 MIME 类型检查
【发布时间】：2017-12-17 02:06:35
【问题描述】：

我正在尝试在 Angular 4 Universal 应用中从 Google 检索联系人。

但一旦完成身份验证，我就会收到此错误消息：

拒绝执行脚本 https://www.google.com/m8/feeds/contacts/default/full?access_token=TOKEN&alt=json 因为它的 MIME 类型（'application/json'）是不可执行的，并且已启用严格的 MIME 类型检查。

目前一切都保存在一个组件中：

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

@Component({
  selector: 'refer-friend',
  templateUrl: './referFriend.component.html',
})
export class ContactsComponent implements OnInit {
  constructor(private jsonp: Jsonp) { }
  ngOnInit(): void {
    this.auth();
  }
  auth() {
    gapi.auth.authorize({
      'client_id': 'CLIENTID.apps.googleusercontent.com',
      'scope': 'https://www.google.com/m8/feeds'
    }, () => {
      this.fetch(gapi.auth.getToken());  
    });
  }
  fetch(token: any) {
    this.jsonp.get('https://www.google.com/m8/feeds/contacts/default/full?access_token=' + token.access_token + '&alt=json')
     .map(data => {
        return data;
     })
     .subscribe(data => {
         console.log(data);
     });
  }
}

我得到了代码from this sample，它可以正常工作而不会发生此错误。所以我只能猜测 Angular 正在影响某些东西....

【问题讨论】：

你确定不是这个的复制品吗？ stackoverflow.com/questions/36289495/…
您也不会在地图中返回数据。它通常用于将响应 w3.org/Protocols/rfc2616/rfc2616-sec6.html 转换为 json 有效负载 - 响应包含 HTTP 标头等，因此 map(response:Response => responce.json())。您还应该将其重构为服务并将其作为 Observable 返回。理想的接口或领域模型类。我看到你正在订阅一个提要。然后，组件应该将带有 @Injectable 注释的服务作为组件构造函数中的私有参数注入，并连接到您的 app-module.ts 的 @ngModule providers:[]
那么组件就变成了... this.service.subscribe(data => this.data = data);
我试图从这里developers.google.com/google-apps/contacts/v3 确定有效负载 - 当您定义可以使用的接口时仅供参考？表示可选属性。见这里typescriptlang.org/docs/handbook/interfaces.html

标签： angular google-chrome jsonp

【解决方案1】：

Google Contacts API 文档有一个链接，指向 alt 标签的工作原理。值 'json' 并不表示它将返回 JSONP 数据。 Google 会返回该 MIME 类型，因为它将提供给您的数据是不可执行的。

https://developers.google.com/gdata/docs/2.0/reference

尝试使用@angular/http 标准获取方法而不是Jsonp。

【讨论】：

你是对的，谢谢！我想我对基于它的示例感到困惑，因为它使用 JSONP 进行 AJAX 调用。