Access-Control-Allow-Origin Error for jquery $.ajax call

[revant_one]

modify /home/frappe/frappe-bench/config/nginx.conf

[Albertus]

Good Day

Maybe this not same issue, but i need help in correct direction to query api from javascript in correct manner. Want to use some information of ERPNext on my website.

I can get values easily with postman, but struggle to get same with ajax:

function firstLogin(email,password) {
var url = “http://192.168.xxx.xxx/api/method/login?usr=user&pwd=Password”
$.ajax({
url: url,
headers: {“Accept”: “application/json”},
contentType: “application/json”,
method: ‘POST’,
dataType: ‘json’,
crossDomain: true,
success: function(data){
alert(data);
}
}).fail(function(r){
alert(‘Failed!’);
});
}

Please help me.

Thank You

[CostaRica]

Thanks for replying, @revant_one.

• I copied your gist and replaced location @webserver in /home/frappe/frappe-bench/config/nginx.conf
• Restarted the server (DigitalOcean)
• I could http://MY_ERPNEXT_IP/api/ directly in Firefox, Chrome, Postman AND Vue-Axios with no problems
• I could http://MY_ERPNEXT_IP/api/method/login?usr=user&pwd=password directly in Firefox, Chrome and Postman with no problems, but not from Vue-Axios

Do you know what headers should I use?

I use

headers: {‘Authorization’: ‘APIKEY’, ‘Content-Type’: ‘application/x-www-form-urlencoded’},

But I get this error:

Access to XMLHttpRequest at ‘http://165.227.109.214/api/method/version’ from origin ‘http://127.0.0.1:8080’ has been blocked by CORS policy: Request header field x-frappe-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

Thanks

[aldoblack]

Here’s what I do usually.

1. On 127.0.0.1 server create a backend request. Python code or whatever language you are using.
2. From back end call http://165.227.109.214/api/method/version
3. From front end call the code on point 1 .

[CostaRica]

I will try your workaround, @aldoblack. Thanks

[CostaRica]

Hi @Albertus.

Take a look at Token Based Rest Api in JavaScript - #6 by CostaRica

You’ll find a simple but complete JavaScript and Python snippet for calling the ERPNext Rest Api

Hope this helps

[peterg]

Just a quick note for anyone struggling with CORS: @revant_one’s modifications to nginx.conf work great, but at least in some circumstances they apply the necessary headers only to successful API calls. That means, if the call fails for some other reason (403, 404, 500, etc.), you might get a misleading Access-Control-Allow-Origin error.

In other words, if you’re still getting Access-Control-Allow-Origin errors even after you’ve changed frappe-bench/config/nginx.conf and reloaded nginx, it’s very possible that CORS isn’t actually the problem but being reported as a false positive. Adding this in hopes of saving someone else some trouble.

Signed,
Someone who learned the hard way

[SanRam]

not able to understand what you are saying
pls can u explain in deep

[sanket]

How do we get actual status for errors like 401, 403 & 500 instead of CORS error?

I did not get cors error when the request returns with status code as 200. I have made the necessary configuration in nginx configuration also.

[peterg]

Excellent question, but unfortunately I don’t know the answer. My understanding of CORS and nginx configs is pretty superficial. Perhaps others in this thread might know, though.

[meltedmoon]

Hi @revant_one,
what if we are running a development server.
from we change nginx.conf file then?
regards

[revant_one]

CORS on localhost

In production set the nginx headers as mentioned before in this thread. (setting it to wildcard ‘*’ is not secure) If you need it for development purpose: In frappe/frappe/app.py, in application(request) function. Place response header just before returning the response @Request.application def application(request): """ ... """ response.headers['Access-Control-Allow-Origin'] = '*' return response

[meltedmoon]

Thanks it worked

[shielasabellita]

Did you solve it? I also have the same issue. I want to get the actual error not the cors.

[snv]

In case you’re using the latest v12 / v13 / develop branch, you can make use of the newly introduced allow_cors site config (documentation).

[shielasabellita]

Still not working. I revised the nginx.conf and also add the allow_cors config on site_config.json.
Still can’t get the error exceptions. Please refer below.

{
 "allow_cors": "https://origin.com/",
 ....
}

[walstanb]

no need to modify nginx.conf also check the network tab to debug issues…

[shielasabellita]

I noticed that it only works on successful requests or status 200. On the other hand, it will return a CORS error instead of throw exception message. I modified the app.py a bit and add CORS headers on return handle_exception function.

[saeid.feyziniya]

Hi
I don’t have “nginx.conf” …

[Puspharaj_A]

The same cors error pops up in frappe 14. though site_config.json and common_site_config.json contains the “allow_cors”:“*”;

I’m using flutter web to access the rest api of frappe, unfortunately this errors all over again sporadically.

Please suggest how to sort this out!