CODEWITHSUNDEEP
javascriptjqueryajaxrestweb
jorge_codes
jorge_codes

Reputation: 3096

Advanced REST Client to jQuery request

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

enter image description here

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": "[email protected]"}
        }
      )
      .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

enter image description here

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/

Upvotes: 1

Views: 1353

Answers (2)

Alejandro Iv&#225;n
Alejandro Iv&#225;n

Reputation: 4051

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.

Upvotes: 1

Victor Hugo Terceros
Victor Hugo Terceros

Reputation: 3169

[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.

Upvotes: 1

Related Questions