Mailgun send error. CORS issue


#1

I try to send a message from my application with mailgun services.

When i try to send message on iOS device i recived this error:

{ "body": { "isTrusted": true}, "status": 0, "ok": false, {}, "type": 3"url": null}

I think this is a problem related to CORS.

This is my code of send function:

  onSubmit(formData) {

    this.loading.present();

    this.myData = formData;

    var requestHeaders = new Headers();
    requestHeaders.append("Authorization", "Basic " + this.mailgunApiKey);
    requestHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    requestHeaders.append("Access-Control-Allow-Origin", "*");
    requestHeaders.append("Access-Control-Allow-Headers", "content-type, accept");
    this.http.request(new Request({
      method: RequestMethod.Post,
      url: "https://api.mailgun.net/v3/" + this.mailgunUrl + "/messages",
      body: "from=costaeventi.ce@gmail.com&to=info@cinemairis.it&subject=Contact Form of Cinema Iris" + "&html=<html><body>First Name: " + formData.firstName + "<br>" + "Last Name: " + formData.lastName + "<br>" + "Email: " + formData.email + "<br>" + "Subject: " + formData.subject + "<br><br>" + "Message: " + formData.message + "</body></html>",
      headers: requestHeaders
    }))

      .subscribe(success => {
        this.loading.dismiss().catch(() => { });
        let alert = this.alertCtrl.create({
          title: 'Email Inviata',
          message: 'Grazie per averci contattato. Le risponderemo appena possibile',
          buttons: [
            {
              text: 'OK',
              handler: () => {

              }
            }
          ]
        });
        alert.present();
      }, error => {

        console.log(error);

        this.loading.dismiss().catch(() => { });
        let alert = this.alertCtrl.create({
          title: 'Errore',
          message: JSON.stringify(error),
          buttons: [
            {
              text: 'OK',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked');
              }
            }
          ]
        });
        alert.present();
      });


    this.myData = formData;

  }

After i’ve added this line in index.html

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

and install these plugins

cordova-plugin-whitelist and cordova-plugin-transport-security

but doesn’t work!

Anyone can help me???

Thank you!


#2

Hi

Are you using Ionic View? The WKWebview it uses is kind-a strict on CORS, compared to Ionic Legacy.

Not sure if WKWebView is also used in native builds (iOS)

Regards

Tom


#3

In ionic view works fine with CORS plugin of Google Chrome. Also on android works. I have this issue only on iOS device (simulator and real device)


#4

Update: I have this issue only if install the WKWebview plugin.

I was forced to install this plugin for this issue: https://github.com/ionic-team/ionic/issues/12958


#5

This doesn’t make sense. “Ionic View” is an iOS or Android app.


#6

Sorry I’ve read from my iPhone while I was on the train. With ionic serve and Android works fine. I didn’t try in ionic view because i have the possibility to run on real devices