表单提交 "Same Origin Policy" 错误 Angular

Question

所以我在我的 Angular 应用程序中使用这个超级酷的 FormSubmit 服务来提交联系人。我在 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)。

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

Answer 1

当你想访问来自不同来源的资源时，需要使用 Access-Control-Allow-Origin header 允许它。当你 post 到 formsubmit.io/send 它 returns 以下 header:

Access-Control-Allow-Origin: *

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

Location: /error/?error=...

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

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

表单提交 "Same Origin Policy" 错误 Angular

FormSubmit "Same Origin Policy" Error Angular

form-submit

same-origin-policy

typescript

angular