Angular提交POST后重定向失败及JSONP错误修复求助

1. 修复路由跳转失败问题 #

你的组件代码中，subscribe方法里的next回调仅引用了onSuccess函数，未实际调用，导致跳转逻辑未执行。

修改subscribe-form-component.ts中的subscribe方法：

subscribe(subscribeForm: NgForm) {
  if (subscribeForm.invalid) {
    return;
  }
  this.subscribeService.subscribeToList(this.subscribeData).subscribe({
    complete: () => { this.subscribeData = {}; }, // 可选：提交后清空表单数据
    next: () => this.onSuccess(), // 调用onSuccess触发跳转
    error: (err) => {
      console.log('err', err);
    },
  });
}

2. 修复JSONP错误问题 #

MailChimp的subscribe/post接口不支持JSONP响应格式，使用http.jsonp会触发"JSONP injected script did not invoke callback"错误，需改用POST请求并配置正确参数：

步骤1：修正服务端请求代码 #

修改subscribe.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class SubscribeService {
  // 修正URL中的转义字符&为&，避免参数解析错误
  mailChimpEndpoint = 'https://xxxxxx.us11.list-manage.com/subscribe/post?u=afd1f3490xxxxxxxxxb&id=035b9xxxx52&f_id=009faxxxf0';

  constructor(private http: HttpClient) { }

  subscribeToList(data: any) {
    const params = new HttpParams()
      .set('EMAIL', data.email)
      .set('afd1f3490xxxxxxxxxxb_009fa6e0f0', '')
      .set('b_afd1f3490xxxxxxxxxb_035b9xxxx52', ''); // 添加MailChimp要求的防机器人验证参数

    return this.http.post(this.mailChimpEndpoint, params.toString(), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded' // 匹配MailChimp的表单编码要求
      },
      responseType: 'text' // 避免Angular尝试将HTML响应解析为JSON
    });
  }
}

步骤2：处理跨域问题（开发环境） #

直接向MailChimp发送POST请求会触发CORS错误，开发环境可通过Angular代理解决：

1. 在项目src目录下创建proxy.conf.json：

{
  "/subscribe/post": {
    "target": "https://xxxxxx.us11.list-manage.com",
    "secure": true,
    "changeOrigin": true
  }
}

2. 修改angular.json中的serve配置，添加代理引用：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxyConfig": "src/proxy.conf.json"
  }
}

重启开发服务器后，请求会通过代理转发，规避CORS错误。

生产环境跨域处理 #

生产环境需在你的服务器上配置反向代理（如Nginx），将请求转发至MailChimp接口；或直接使用MailChimp官方提供的嵌入式表单代码。

内容的提问来源于stack exchange，提问作者Noble Polygon