Advanced REST Client to jQuery request

Question

I have an ARC set up by the client and everything seems to be working OK in ARC and the back-end, but I cannot see what I'm doing wrong in jQuery

Here's the ARC test

Here's my jQuery code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script> 
  <script>
    let urlBase = 'http://54.210.29.209';
    let urlEnterEmail = '/api/v1/users/checkEmail';

    $(document).ready(function() {

      $.ajax(
        {
          method: "POST",
          crossDomain: true,
          url: urlBase + urlEnterEmail,
          xhrFields: {withCredentials: true},
          headers: {
            "Access-Control-Request-Headers": "x-requested-with",
            "Content-Type": "application/json",
            "Platform": "web",
            "Build": 2
          },
          contentType: "application/json; charset=utf-8",
          dataType: 'json',
          data: {"email": "john@doe.com"}
        }
      )
      .done(function (response) {
        console.log('done!');
        console.log(response);
      })
      .fail(function (xhr, status) {
        console.log('fail!!!');
        //console.log(xhr); 
        console.log(status);
      });

    });
  </script>
</head>
<body>

</body>
</html>

Finally, the error

I read a little bit about CORS, but it's not working. The resources I found are the following, and still I don't know if I'm the one with the problem or the back-end code.

How to get a cross-origin resource sharing (CORS) post request working

https://www.html5rocks.com/en/tutorials/cors/

Try to stringify your data - data: JSON.stringify({ "email": "johndoe@server.com" }) — Shane, Aug 11 '17 at 17:04
what technology are you using for your backend? Actually the guy who is making the backend has to do something about it - or you could serve your API and frontend over the same domain. — lumio, Aug 11 '17 at 21:49

score 1 · Answer 1 · answered Aug 11 '17 at 22:39

[This example uses AspNet Web Api, C# as Backend] Your problem seems related to the Api and not to your javascript call itself, Look at this, it is a Cross Origin call:

$.ajax({
        type: 'POST',
        url: CTHelper.ApiUrl() + '/token',
        data: { grant_type: 'password', username: $scope.UserName, password: $scope.Password },
        success: function (result) {
          alert('OK');
        },
        error: function (result) {
            alert('Error');
        }
    });

but my API (Back end) allows CORS, this is a part of the file Startup.Auth.cs

public void ConfigureAuth(IAppBuilder app)
    {
        ...
        app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
        ...
    }

Microsoft.Owin.Cors can be downloaded as a nuget.

Alejandro Iván · Answer 2 · 2017-08-11T22:51:44.307

Your problem is clearly stated in there. The web browser is restricting your access to the backend due to the lack of Access-Control-Allow-Origin (cross site requests) header from the server.

If your backend is running PHP, using this in the first line of your script should be enough:

<?php
    header("Access-Control-Allow-Origin: *");
    // The rest of your backend script here
    // ...

That askerisk (*) will basically tell "accept requests from every source". You could, of course, use the same address of the backend if the web page was loaded from it (basically its origin is the same). So if these files are uploaded to your server to the side of the script, this should work too:

<?php
    header("Access-Control-Allow-Origin: http://54.210.29.209");

I'm not really sure if using http://localhost would work, probably not but it's worth trying it.

Advanced REST Client to jQuery request

2 Answers2