JSONP http请求在Angular中给出404

Question

我一直在将mailchimp集成到angular应用程序中，并在纯JS中使用它，我从mailchimp站点的嵌入式表单中获得了代码，并且代码如下，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://gmail.us10.list-manage.com/subscribe/post?u=aaa7182511d7bd278fb9d510d&amp;id=01681f1b55" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
</div>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_aaa7182511d7bd278fb9d510d_01681f1b55" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

上面的代码工作正常，没有问题。在我尝试如下的角度应用程序中需要包含相同的内容，

参考我参加了：https://gist.github.com/inorganik/846c52550db97454646054270e4f1270

并且实现如下，

app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpClient, HttpParams } from '@angular/common/http';

interface MailChimpResponse {
  result: string;
  msg: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
submitted = false;
  mailChimpEndpoint =
    'https://gmail.us10.list-manage.com/subscribe/post?u=aaa7182511d7bd278fb9d510d&id=01681f1b55';
  error = '';

  constructor(private http: HttpClient) {}

  userForm: FormGroup;

  ngOnInit(): void {
    this.userForm = new FormGroup({
      email: new FormControl('', [
           Validators.required,
            Validators.email,
        ]),
    });
  }

  subscribeEmail() {
    this.error = '';


        if (this.userForm.controls.email.status === 'VALID') {

      const params = new HttpParams()
                .set('EMAIL', this.userForm.controls.email.value)
      console.log(params);
            const mailChimpUrl = this.mailChimpEndpoint + params.toString();

            this.http.jsonp<MailChimpResponse>(mailChimpUrl, 'callback').subscribe(response => {
        console.log('response ', response)
                if (response.result && response.result !== 'error') {
                    this.submitted = true;
                }
                else {
                    this.error = response.msg;
                }
            }, error => {
                console.error(error);
                this.error = 'Sorry, an error occurred.';
            });
        }
  }
}

Working Stackblitz here ..

我的要求是上面的代码段中有效的代码在角度应用程序中不起作用，并且导致404错误。。

请查看开发人员工具中的网络/控制台选项卡，它会显示404。

此外，我还注意到我传递给url的参数未反映在网络调用的查询参数中。

[请帮助我实现相同的api网址，该网址在单击订阅按钮时也可以在Angular应用程序中使用。

请看一下stackblitz：https://stackblitz.com/edit/angular-jsonp-gfzdr1

我一直在将mailchimp集成到angular应用程序中，并且为了在纯JS中使用它，我从mailchimp站点的嵌入式表单中获取了代码，代码如下，