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

Frappe Framework App Development
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.

1 Like
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

1 Like
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.

1 Like
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

1 Like
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(r){
alert(ā€˜Failed!ā€™);
});
}

Please help me.

Thank You

1 Like
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 - #6 by CostaRica

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

Hope this helps

1 Like
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:

7 Likes
40

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

41

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.

42

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.