CORS issue wile accessing through Rest API

1

Hello All

My frontend is a Angular App running on localhost and ERPNext is running on a remote server.
I was able to Login properly. But to test the negative scenario, if i give wrong password, CORS error is displayed on console instead of proper error response.

Below is the setup for CORS at server

location @webserver {
if ($request_method = ‘OPTIONS’) {

            add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:4200';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
    }
    if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:4200';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

    if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:4200';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }
    #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Frappe-Site-Name <sitename here>;
    proxy_set_header Host $host;
    proxy_set_header X-Use-X-Accel-Redirect True;
    proxy_read_timeout 120;
    proxy_redirect off;

    proxy_pass  http://frappe_bench-frappe;

}

Also I am using

proxy_cookie_path ~(.*) “$1; SameSite=None;”;

To set cookie

2

Use the new allow_cors config

3

Thanks for your reply.

I have reset frappe_bench/config/nginx.conf to default
Have setup allow_cors in site_config.json
bench setup nginx
service nginx restart

Still its giving CORS issue, login with correct details also doesn’t work.

4

try simple endpoints first. /api/method/ping or /api/method/version, it they work CORS work.

In case the api response is any error (non 200/2xx status code), it will respond with cors. This is because cors headers are set only on success response, for error response no cors headers are set.

It means cors error can be false error that hides the real underlying error.

Also confirm the version, or even accurate will be compare if cors code exists in frappe. Because sometimes versions are misleading.

5

Thanks Revant.

I was able to set the cors headers for success response. How do i set the same for error response?

6

I was able to set cors headers for error response as well setting below config in the old approach.

if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:4200' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

Have added always attribute at the end
I am not sure if its the right way.
Can you pls guide me?

1 Like
7

Thanks, it works for me.

8

In new version 12 and 13 of frappe not required to change in nginx configuration file because we can set allow_cors parameter in site_config.json and that will set headers for response.

9

I ran into a strange issue today

My angular app is on local host and i access it using 127.0.0.1:4200. With the above setup for cors and

proxy_cookie_path ~(.*) "$1; SameSite=none; httponly";

At server block of nginx config, i was able to access and the login was successfull, my app works fine

With the same setup i am installing in a new server, it doesnt work. The samesite is received as Lax from server always.

The old installation was for v12, now i am doing v13 in a new server

Any idea?

10

I finally found the issue after digging it for entire 24hrs

The line 340 below is setting samesite to “Lax”

This is the cause of issue for me. If i change it to None instead of Lax, things work fine as before.

But i dont want to change the code. Is there any config for this?

@adityahase Can you pls help me? since you have committed the change.

11

Actually, I switched Strict to Lax. Do the commit messages help?

https://github.com/frappe/frappe/commit/654950fef341fcc4473413188eea513548090d14

https://github.com/frappe/frappe/commit/a72f8088972c7154e3400e59449de5bd2c5023e5

1 Like