simple ajax POST with cross domain request

Question

I am trying to send a simple form with only one parameter to an API made by my back-end programmer, he told me that all i need to do is to send the one parameter to a given URL via POST using ajax.

The problem is I get a No 'Access-Control-Allow-Origin' header is present error.

I've read through this question and tried to implement the first answer's solution with no success. When i test the API via hurl it works with no problem.

this is the code that i am using to send the form

    $( document ).ready(function() {
        $('.btnEnviar').click(function(){
            $.ajax({
                type: 'POST',
                url: 'http://xxxxx.xxx/subscribers/subscribeEmail',
                datatype: 'jsonp',
                async: true,
                success:function(){
                    try{
                        alert("ok");
                    }catch (e){
                        alert(e);
                    }
                } 
            });                
        });
    });

And this is the form:

<form class="newsletter" method="post" action="http://xxxxx.xxx/subscribers/subscribeEmail">
                    <input type="text" placeholder="mail here!" class="input" name="email">
                    <input type="submit" class="send pull-right hidden" value="Subscribe me!" placeholder="Subscribe me!">
                    <span class="btnEnviar"><i class="fa fa-envelope"></i></span>
                </form>

there shouldn't be any PHP involved in the process.

Any insights on what could I be doing wrong?

if i send the form without ajax i get the correct response from the API so i'ts just a problem with my ajax script — user2770956, Mar 28 '15 at 22:00

Greg Prisament · Answer 1 · 2015-03-28T22:11:28.637

-2

Try adding crossDomain: true and xhrFields: { withCredentials: true } to the request:

$( document ).ready(function() {
    $('.btnEnviar').click(function(){
        $.ajax({
            type: 'POST',
            url: 'http://xxxxx.xxx/subscribers/subscribeEmail',
            datatype: 'jsonp',
            async: true,
            xhrFields: {
               withCredentials: true
            },
            crossDomain: true,
            success:function(){
                try{
                    alert("ok");
                }catch (e){
                    alert(e);
                }
            } 
        });                
    });
});

See http://api.jquery.com/jquery.ajax/

edited Mar 28 '15 at 22:11

answered Mar 28 '15 at 22:06

Greg Prisament

2,166
1
17
18

1

tried it, and get a net::ERR_NAME_RESOLUTION_FAILED error – user2770956 Mar 28 '15 at 22:10
@user2770956 Probably because http://xxxxx.xxx isn't the real URL, but that's the one you gave in your question. – Greg Prisament Mar 28 '15 at 22:12
What an idiot. I fixed it but now i get the same error as before No 'Access-Control-Allow-Origin' is present. – user2770956 Mar 28 '15 at 22:14
The server side needs to set the "Access-Control-Allow-Origin" header in the response. Tell your backend programmer to add that. – Greg Prisament Mar 28 '15 at 22:15
But if i try the API with hurl.it (it's another domain as well) it works properly – user2770956 Mar 28 '15 at 22:17

simple ajax POST with cross domain request

1 Answers1

Linked