javascript - JSONP http请求在Angular中给出404

问题描述

我一直在将 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&amp;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.';
            });
        }
  }
}

在这里工作 Stackblitz ..

我的要求是在片段中工作的上述代码在角度应用程序中不起作用，它会导致404错误..

请查看开发人员工具中提供 404 的网络/控制台选项卡。

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

请帮助我实现相同的 api url，该 api url 在单击订阅按钮时也可以在 angular 应用程序中工作。

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

标签： javascriptangulartypescriptjsonpmailchimp

javascript - JSONP http请求在Angular中给出404

问题描述

解决方案

推荐阅读