ERPNext Foundation ERPNext Cloud User Manual Blog Discuss Frappé* Donate

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

api

#22

First try simple request to /api/method/version. or authenticated request to /api/method/ping

If simple requests work, there must be some other error.


#23

I have tried your suggestion

and got an output of

Object { message: "9.2.22" }

but when i try the login request and used the same code above i got an Cross-Origin Request Blocked.

hmmm :thinking:


#24

so i tried to remove a line of code in my ajax request.

contentType: 'application/json; charset=utf-8',

and it works! :grinning:

Thanks for your help @revant_one! :grin:


#25

Running on production server

sudo nginx -t -c /etc/nginx/conf.d/frappe-bench.conf

got

nginx: [emerg] "upstream" directive is not allowed here in /etc/nginx/conf.d/frappe-bench.conf:1
nginx: configuration file /etc/nginx/conf.d/frappe-bench.conf test failed

Before even updating for cors.

By any change someone knows what is goiing on ?


#26

you need to run nginx -t -c on /etc/nginx/nginx.conf

bench creates its own conf file that gets included in nginx.conf


#27

Hi @revant_one

  • Is it /home/frappe/frappe-bench/config/nginx.conf or /etc/nginx/nginx.conf the one I am suppose to modify?

Thanks


#28

I don’t know if this is fixed or not but you need to include headers in ajax call.

This is my AngularJS code:

service.getUsers = function (formData) {
            return $http({
                method: 'POST',
                url: urlBase + 'ec_site_survey.public.submit',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Frappe-CSRF-Token': '{{ frappe.session.csrf_token }}'
                },
                data: {
                    formData: formData
                }
            });
        };

It worked for me.


#29

-Did you have to make changes to the nginx.conf for your code to work, @aldoblack ?


#30

No, I did not have to.

Just a question. Are you trying to call the api from another domain, or form the same?

If it from the same, use the one that I provided.


#31

It is from another domain, that is why I have the CORS problem


#32

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


#33

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®{
alert(‘Failed!’);
});
}

Please help me.

Thank You


#34

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


#35

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 .

#36

I will try your workaround, @aldoblack. Thanks


#37

Hi @Albertus.

Take a look at Token Based Rest Api in JavaScript

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

Hope this helps


#38

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 :slight_smile: