JSONP 方法不能在 localhost 上使用 Angular 8答案

【问题标题】：JSONP method is not Working with Angular 8 on localhostJSONP 方法不能在 localhost 上使用 Angular 8
【发布时间】：2020-03-27 09:57:31
【问题描述】：

我正在尝试将 JSONP 与 Angular 8 一起使用，以避免跨域策略。

通常在新版本的 Angular 中，您可以在 .module 中使用 HttpClientJsonpModule 使其工作。

这是下面的代码，然后是错误：

//The service.ts
import { Injectable } from '@angular/core';
    import {HttpClient} from '@angular/common/http';

    @Injectable({
      providedIn: 'root'
    })
    export class ZohoRecruitService  {
      res;
      email:string = 'email@email.com';
      pass:string= 'xxxxxxx';
      zohoUrlAuth = `https://accounts.zoho.com/apiauthtoken/nb/create?SCOPE=ZohoRecruit/recruitapi&EMAIL_ID=${this.email}&PASSWORD=${this.pass}`;

      constructor(
        private httpclient: HttpClient
      ) { }

      getToken() {
        this.httpclient.jsonp(this.zohoUrlAuth, 'callback')
          .subscribe(
            res => {
              this.res = res;
              console.log('test');
            });
      }


    }//END Class

//The component where the service is called
import { Component, OnInit } from '@angular/core';
//Service Authentification
import { AuthService } from 'src/app/services/auth.service';
import { ZohoRecruitService } from 'src/app/services/zoho-recruit.service';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  //PROPRIÉTÉS
  prenom:string;
  nom:string;

  constructor(
    private authentificationService: AuthService,
    private ZohoRecruit: ZohoRecruitService
  ) { }

  ngOnInit() {
    this.authentificationService.user$.subscribe(
      value => {
        this.prenom = value[0].prenom;
        this.nom = value[0].nom;
      }
    )//END subscribe

    this.ZohoRecruit.getToken();

  }//END ngOnInit

  deconnexionDashboard(){
    this.authentificationService.deconnectUser();
  }
}

//并且模块中导入的Modules是 //模块HTTP

import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';

我在控制台中遇到的错误是：

错误：http.js:1690 GET https://accounts.zoho.com/apiauthtoken/nb/create?SCOPE=ZohoRecruit/recruitapi&EMAIL_ID=email@email.com&PASSWORD=xxxxxx@&callback=ng_jsonp_callback_0 net::ERR_ABORTED 400

与

ERROR: core.js:9110 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "JSONP Error", url: "https://accounts.zoho.com/apiauthtoken/nb/create?S...ASSWORD=xxxxx2@&callback=ng_jsonp_callback_0", ok: false, ...}

您好，相同的请求（相同的参数）正在使用 Postman。这是 Postman 的代码：

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://accounts.zoho.com/apiauthtoken/nb/create?SCOPE=ZohoRecruit/recruitapi&EMAIL_ID=xxx&PASSWORD=xxxxx",
  "method": "GET",
  "headers": {
    "User-Agent": "PostmanRuntime/7.19.0",
    "Accept": "*/*",
    "Cache-Control": "no-cache",
    "Postman-Token": "xxxxx",
    "Host": "accounts.zoho.com",
    "Accept-Encoding": "gzip, deflate",
    "Cookie": "xxxxxxx; iamcsr=xxxxxxx",
    "Connection": "keep-alive",
    "cache-control": "no-cache"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

【问题讨论】：

标签： angular jsonp

【解决方案1】：

问题是因为 API 请求是在 Front (Angular) 上完成的。我将代码移到 Node.js（服务器）上并使用常规 http 模块发出请求。

【讨论】：