Agfdhyk

I have added a cors header in my Angular 7.0.5 project but i am still getting the following error when submitting a form and sending the form data to a 'back-end' (google script):

Access to XMLHttpRequest at 'https://script.google.com/blabla' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am not receiving this error when i try this in Chrome with disabled security.

Might be a syntax error but i have been searching for a long time and tried a lot of things but i can't get it working.

import {Component, OnInit} from '@angular/core';

import {FormBuilder, FormGroup, Validators} from '@angular/forms';

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

import {ContactFormDto} from '../services/dto/contactform.dto';



const headers = new HttpHeaders()

    .set('Content-Type', 'undefined')

    .set('Access-Control-Allow-Origin', '*')

    .set('Access-Control-Allow-Methods', 'POST')

    .set('Access-Control-Allow-Headers', 'Origin')

    .set('Access-Control-Allow-Credentials', 'true');



@Component({

    selector: 'app-contact',

    templateUrl: './contact.component.html',

    styleUrls: ['./contact.component.sass']

})



export class ContactComponent implements OnInit {



contactForm: FormGroup;

submitted = false;



MAIL_SCRIPT_URL = 

'https://script.google.com/scriptlocation';



private contactFormDto: ContactFormDto;



constructor(private formBuilder: FormBuilder, private http: HttpClient) {

    this.contactForm = this.formBuilder.group({

       name: ['', Validators.required],

       email: ['', Validators.required],

       message: ['', Validators.required],

    });

}



onSubmit() {

  this.submitted = true;

  if (this.contactForm.valid) {

  this.contactFormDto = new ContactFormDto(

    this.contactForm.controls.name.value,

    this.contactForm.controls.email.value,

    this.contactForm.controls.message.value

  );



  this.http.post(

    this.MAIL_SCRIPT_URL,

    this.contactFormDto,

    {headers}

  ).subscribe(data => {

    console.log('Mail has been sent' + data);

  }, error => {

    console.log('Mail has not been sent ' + error);

  });



  console.log('name: ' + this.contactForm.controls.name.value + ' email: ' + 

  this.contactForm.controls.email.value + ' message: ' + 

  this.contactForm.controls.message.value);

  }

}



ngOnInit() {

}

The 'backend' is a google script (runs when i post the form results to the url)

var TO_ADDRESS = "myaddress@gmail.com"; // where to send form data



function doPost(e) {



try {

  Logger.log(e); // the Google Script version of console.log see: Class 

  Logger

  MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted",

                  JSON.stringify(e.parameters));

  // return json success results

  return ContentService

      .createTextOutput(

        JSON.stringify({"result":"success",

                        "data": JSON.stringify(e.parameters) }))

      .setMimeType(ContentService.MimeType.JSON);

} catch(error) { // if error return this

  Logger.log(error);

  return ContentService

      .createTextOutput(JSON.stringify({"result":"error", "error": e}))

      .setMimeType(ContentService.MimeType.JSON);

  }

}

If you want Easiest way you can use plugins.

Allow-Control-Allow-Origin

URL LINK: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en