JSONP http请求在Angular中给出404

Posted 2023-03-03

【中文标题】JSONP http请求在Angular中给出404

【英文标题】：JSONP http request gives 404 in Angular

【发布时间】：2020-09-16 23:07:02

【问题描述】：

我一直在将 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_signupbackground:#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 ..

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

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

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

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

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

【参考方案1】：

在网址后添加 & 例如这是你的网址：- https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55

在此处添加 & 符号 https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55&

下面是有效的stackblitz url

工作版本：https://stackblitz.com/edit/angular-jsonp-96dmvh

【讨论】：

你不能自己判断。对 OP 最有帮助的答案，他们可以“接受”，这会导致绿色勾号。对其他答案进行投票。像您在自己的帖子上所做的评论只是一种观点，并且显然是有偏见的观点。一个答案是好的，如果它解释了它是如何工作的以及为什么它应该有所帮助。如果格式合适（***.com/editing-help），则答案更容易被识别为好答案，否则会遵循How to Answer。

【参考方案2】：

您没有正确发送参数。这是一个将发送请求的工作示例。它仍然返回一个错误，但它是来自 MailChimp 的响应，即您处理了太多记录。

工作版本：https://stackblitz.com/edit/angular-jsonp-1qquhy