1

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.

Cross-origin resource sharing (CORS) post request works from plain javascript, but why not with jQuery

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

Improve this question
4
  • And you're getting no errors, and no response ? Commented Aug 11, 2017 at 16:53
  • Try to stringify your data - data: JSON.stringify({ "email": "[email protected]" }) Commented Aug 11, 2017 at 17:04
  • @Shane noup... not working with stringify :( Commented Aug 11, 2017 at 20:09
  • 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. Commented Aug 11, 2017 at 21:49

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.