Jquery AJAX call not working and always goes to error function

Question

I'm creating a reset password page and when i try to submit the data to the backend through ajax call, it always returns to the error function. And when i'm trying to print the error, it is not showing me any error.

$.ajax({
 url: "php file url",
    method: "GET",
     data: {
     "action":1,
      "email":email
       },
       success:function(data){
        },
       error:function(){
        close_loader();
        show_snack("Problem!!! Try again later...");
      }
});

It never gets to the success function... I'm getting this -

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at the url. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

When you view the response in the developer console you see the text? — user3783243, Aug 01 '18 at 13:06
Is the `url` actually "php file url"? Or is this just for demonstration? — Rickless, Aug 01 '18 at 13:07
it is not showing me any response. it just goes to the error function even if i try to print the error, it shows nothing... — , Aug 01 '18 at 13:08
Open the developer console, run the event that triggers the ajax, and then see what the response the server sends is. — user3783243, Aug 01 '18 at 13:10
I'm getting this - Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at the url. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). — , Aug 01 '18 at 13:12
This means the server does not support CORS requests. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS . If the URL you're sending to via AJAX is on another server, domain, or even port number than the main URL where your page is loaded then you're subject to CORS restrictions. — ADyson, Aug 01 '18 at 13:16
Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — peeebeee, Aug 01 '18 at 13:20
yes, the requesting file is in the same folder as the php file — , Aug 01 '18 at 13:42
please run your file by direct call from browser which you give in the ajax url .. is its working fine or gives some error. — dineshkashera, Aug 01 '18 at 14:03
Are you loading your HTML page using `file://` or `http://`? It must be done through HTTP or it can never work. CORS is not allowed on pages served via `file://` — ADyson, Aug 01 '18 at 14:19

score 0 · Answer 1 · answered Aug 01 '18 at 13:56

This question is asked several times but nobody explaining it in better ways. So, Let me tell you what is the issue and then their resolution.

When you are talking with another server by using ajax call, you basically create an HTTP request similarly like you are hitting address in URL.
Nowadays, rest API is created in the mind so the only authenticated user can use that rest API. Now, who is authenticated and how you know that.
When Server is set up at its initial phase, They use authentication mechanism using some custom domain or necessary Headers. (Custom Domain: Only particular domains can access the rest API. **Custom Headers: ** They use some type of the attribute in the header and they verified at runtime whether the request sends that header or not) For example You have a server where you are checking whether the request contains that attribute in the header (it may be any attribute, for ex: request header content type must be application/json) or not.

Now, Coming back to your question. When you are using ajax call, The browser first checks whether this request is accepted by the server or not by firing OPTION request call first. If the response comes 200 then again browser sends your original request with your all data otherwise it will fail and send you CORS issue.

Resolution You can resolve it in server side by verifying all the Header attribute. (Recommended method) You can also customize it using the proxy server. Now, what is the proxy? It's kind of hacking method where your original request will go to your proxy server and then the proxy server has the responsibility to call your actual request and get back you the response. So, How you set up the proxy server and how he knows and authorized by the server. It's actual trial and hit method where he added some dummy attribute in Header and tried to request it. If it's pass then you are good otherwise or it fails. (Example: Use CORS extension in google chrome)

score 0 · Answer 2 · answered Aug 01 '18 at 14:02

The error exactly explains your problem, there is no proper cross-origin header returned.

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at the url. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

When the origin doesn't have the header, your browser assumes all requests to the domain should be blocked from outside domains:

Requests from javascript files in domain.com to otherdomain.com will be blocked
Requests from domain.com to a file at www.domain.com will be blocked as well -> they are considered different domains by CORS.
Rquests from domain.com to domain.com are allowed by default

To solve the issue, write the following code in your PHP file:

$scriptdomain = "domain-where-the-script-is.something";
header("Access-Control-Allow-Origin: $scriptdomain");

score 0 · Answer 3 · answered Aug 01 '18 at 14:22

You can download this tool for chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Basically, that happens in a localhost environment, that shouldn't happens in a real server, then you can active it (color green) to allow you execute request to cross domains without problems

Jquery AJAX call not working and always goes to error function

3 Answers3