FormSubmit“同源策略”错误角度

【问题标题】：FormSubmit "Same Origin Policy" Error AngularFormSubmit“同源策略”错误角度
【发布时间】：2020-04-06 01:56:40
【问题描述】：

所以我使用这个超级酷的FormSubmit 服务在我的 Angular 应用程序中提交联系人。我在 Angular HttpClient 的帮助下发送表单数据。

以下是我的服务：

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

@Injectable({
  providedIn: 'root'
})
export class FormsubmitService {

  constructor(
    public httpClient: HttpClient
  ) { }

  sendForm(formData: object) {
    console.log('Form Data:', formData);
    this.httpClient.post('https://formsubmit.io/send/<TOKEN HERE>', formData)
      .subscribe((response) => console.log(response), (error) => console.log(error));
  }
}

提交后，我在控制台日志中收到此错误代码Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://formsubmit.io/error/. (Reason: CORS header 'Access-Control-Allow-Origin' missing)。

有什么办法可以解决这个问题吗？

【问题讨论】：

标签： angular typescript form-submit same-origin-policy

【解决方案1】：

当你想从不同的来源访问资源时，它需要使用Access-Control-Allow-Origin 标头来允许它。当您发布到formsubmit.io/send 时，它会返回以下标题：

Access-Control-Allow-Origin: *

目前还没有问题，因为formsubmit.io 明确表示它允许从任何来源 (*) 访问。但是，由于某些与 CORS 无关的错误，它会使用 Location 标头将您重定向到 formsubmit.io/error。

Location: /error/?error=...

您的浏览器会自动向该地址发送GET。这个新地址不会发送任何Access-Control-Allow-Origin 标头，因此您的浏览器会阻止它。您可以在开发工具的Network 选项卡中查看请求 URL 中的错误并修复它。

或者，您可以在开发期间在浏览器中禁用 CORS。 Chrome 和 Firefox 都有插件可以实现这一点。

【讨论】：