CODEWITHSUNDEEP
ionic-frameworkcorsmailgun
asasa178
asasa178

Reputation: 221

Ionic http CORS same origin not allowed

I'm trying to set a Mailgun mail service in an ionic app. Here is the code: Controller:

$http({
                        "method": "POST",
                        "url": "https://api.mailgun.net/v3/" + mailgunUrl + "/messages",
                        //"crossDomain": "true",
                        "headers": {
                            "Access-Control-Allow-Origin": "*",//"http://localhost:8100",
                            "Access-Control-Allow-Headers": "content-type, accept",
                            //"Access-Control-Allow-Credentials": "true",
                            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
                            "Content-Type": "application/x-www-form-urlencoded",
                            'Authorization' : 'Basic '+ mailgunApiKey
                            //"Authorization": "Basic " + mailgunApiKey//$base64.encode('api:key-'+mailgunApiKey)
                        },
                        data: "from=" + "[email protected]" + "&to=" + $scope.datapopup.mail + "&subject=" + "Guestlist" + "&text="

config.xml

<content src="main.html"/>
  <access origin="*"/>
  <plugin name="cordova-plugin-whitelist" version="1"/>
  <plugin name="cordova-plugin-crop" spec="~0.1.0"/>
  <allow-navigation href="*" />
  <allow-intent href="*"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="geo:*"/>

I receive the status '0' error and the logs show that CORS (Cross-Origin request) is not allowed with access-control-allow-headers missing (translated from french).

Another error from Chrome is 'Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.'.

I tried also from android device but is not working. Any idea?

Upvotes: 1

Views: 1349

Answers (2)

asasa178
asasa178

Reputation: 221

The answer is very simple:

when you run android from ionic you shouldn't use any optional parameter: ionic run android

Upvotes: 0

Tomislav Stankovic
Tomislav Stankovic

Reputation: 3126

Add this to index.html 

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

and add cordova-plugin-whitelist plugin to your app.

For the purpose of development you can use CORS plugin for Chrome.

Your controller can be like this:

.controller("EmailCtrl", function($scope, $http) {

    var mailgunUrl = "YOUR_DOMAIN_HERE";
    var mailgunApiKey = window.btoa("api:key-YOUR_API_KEY_HERE")

    $scope.recipient = "[email protected]";

    $scope.send = function(recipient, subject, message) {
        $http(
            {
                "method": "POST",
                "url": "https://api.mailgun.net/v3/" + mailgunUrl + "/messages",
                "headers": {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Authorization": "Basic " + mailgunApiKey
                },
                data: "from=" + "[email protected]" + "&to=" + recipient + "&subject=" + subject + "&text=" + message
            }
        ).then(function(success) {
            console.log("SUCCESS " + JSON.stringify(success));
        }, function(error) {
            console.log("ERROR " + JSON.stringify(error));
        });
    }

})

Upvotes: 1

Related Questions