FormSubmit Ошибка "Политика одинакового происхождения" Angular - PullRequest
Новая
       95

FormSubmit Ошибка "Политика одинакового происхождения" Angular

0 голосов
/ 05 апреля 2020

Так что я использую этот супер крутой 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) в журнале консоли после отправки.

Есть идеи, как это исправить?

1 Ответ

1 голос
/ 05 апреля 2020

Если вы хотите получить доступ к ресурсам из другого источника, необходимо разрешить его с заголовком 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, и ваш браузер блокирует его. Вы можете просмотреть ошибку в URL-адресе запроса на вкладке Network вашего Dev Tools и исправить ее.

enter image description here В качестве альтернативы вы можете отключить CORS в своем браузере на время разработки. Есть плагины для Chrome и Firefox, которые могут этого достичь.

...