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

iqlas · March 28, 2017, 2:52pm

I am trying to make jquery $.ajax call to http://192.168.1.14/api/method/login but the console gives Access-Control-Allow-Origin error.

I edited /home/frappe/frappe-bench/config/nginx.conf and added

add_header Access-Control-Allow-Origin *;

inside server{ } section.

Still i am getting same error. Can anyone please let me know what should be done.

ratskin · March 28, 2017, 4:05pm

Can you share your code?

Possibly related to javascript - Ajax - "Access-Control-Allow-Origin" Error - Stack Overflow

iqlas · March 28, 2017, 4:07pm

$(document).ready(function(){
	$("#btn-login").click(function(){
		$.ajax({
		url:"http://192.168.1.14/api/method/login",
		method:"POST",
		data:$("#loginform").serialize(),
		beforeSend:function(){
			$("#btn-login").text('Submitting..');
		},
		success:function(data){
			console.log(data);
		}
	});
	});
});

and the html

 <form id="loginform" class="form-horizontal" role="form" method="POST">
                                    
                            <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                        <input id="login-username" type="text" class="form-control" name="usr" value="" placeholder="username or email">                                        
                                    </div>
                                
                            <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                        <input id="login-password" type="password" class="form-control" name="pwd" placeholder="password">
                                    </div>

                                <div style="margin-top:10px" class="form-group">
                                    <!-- Button -->

                                    <div class="col-sm-12 controls">
                                      <a id="btn-login" href="#" class="btn btn-success">Login  </a>

                                    </div>
                                </div>   
                            </form>

ratskin · March 28, 2017, 4:11pm

Did you reload nginx using sudo service nginx reload?

Maybe also try

Header set Access-Control-Allow-Origin "*"

or

add_header Access-Control-Allow-Origin "*";

ratskin · March 28, 2017, 4:22pm

Also this line in your JS code

url:"http://192.168.1.14/api/method/login",

Maybe it should be this?

url:"api/method/login",

iqlas · March 28, 2017, 4:23pm

I guess no because I have the html/JS on one machine and ERPNext on another. (on same LAN)

iqlas · March 28, 2017, 4:38pm

I think this seems to work… still it’s throwing bunch of other errors, i’ll check & update shortly

iqlas · March 28, 2017, 7:02pm

@umair, I need your help here. or can you please guide me where i can find tutorials for REST API

tmatteson · June 13, 2017, 1:27am

@iqlas

$this?
https://frappe.github.io/frappe/user/en/guides/integration/rest_api.html

revant_one · October 9, 2017, 4:30pm

Working nginx conf

I’ve added few things in location @webserver

edit: revised gist thanks @jhe01

jhe01 · January 23, 2018, 6:50am

Hello @revant_one,

I tried youre nginx config but i got an error when i restart nginx using command

sudo service nginx restart

revant_one · January 23, 2018, 7:15am

share output of

sudo nginx -t

jhe01 · January 23, 2018, 7:18am

@revant_one,

here is the output

revant_one · January 23, 2018, 7:19am

line 64 of frappe-bench/config/nginx.conf has error

jhe01 · January 23, 2018, 7:21am

this is y line 64 in nginx.conf …

revant_one · January 23, 2018, 7:24am

can you share the whole file? in text? there must be some syntax error somewhere.

jhe01 · January 23, 2018, 7:34am

@revant_one,

here it is

upstream frappe-bench-frappe {
    server 127.0.0.1:8000 fail_timeout=0;
}

upstream frappe-bench-socketio-server {
    server 127.0.0.1:9000 fail_timeout=0;
}



# setup maps


# server blocks





server {
	listen 8082;
	server_name
		site2.local
		;



	root /home/frappe/frappe-bench/sites;
	
	location /assets {
		try_files $uri =404;
	}

	location ~ ^/protected/(.*) {
		internal;
		try_files /site2.local/$1 =404;
	}

	location /socket.io {
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
		proxy_set_header X-Frappe-Site-Name site2.local;
		proxy_set_header Origin $scheme://$http_host;
		proxy_set_header Host $host;

		proxy_pass http://frappe-bench-socketio-server;
	}

	location / {
		

		try_files /site2.local/public/$uri @webserver;
	}

	location @webserver {	
		if ($request_method = 'OPTIONS') {

		        add_header 'Access-Control-Allow-Origin' '*';
		        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-Contro$
		        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' '*';
		        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-Contro$
		}

		if ($request_method = 'GET') {
		        add_header 'Access-Control-Allow-Origin' '*';
		        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-Contro$
		}
		

		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header X-Frappe-Site-Name site2.local;
		proxy_set_header Host $host;
		proxy_set_header X-Use-X-Accel-Redirect True;
		proxy_read_timeout 200;
		proxy_redirect off;

		proxy_pass  http://frappe-bench-frappe;
	}

	# error pages
	error_page 502 /502.html;
	location /502.html {
		root /home/frappe/.bench/bench/config/templates;
		internal;
	}

	# optimizations
	sendfile on;
	keepalive_timeout 15;
	client_max_body_size 50m;
	client_body_buffer_size 16K;
	client_header_buffer_size 1k;

	# enable gzip compresion
	# based on https://mattstauffer.co/blog/enabling-gzip-on-nginx-servers-including-laravel-forge
	gzip on;
	gzip_http_version 1.1;
	gzip_comp_level 5;
	gzip_min_length 256;
	gzip_proxied any;
	gzip_vary on;
	gzip_types
		application/atom+xml
		application/javascript
		application/json
		application/rss+xml
		application/vnd.ms-fontobject
		application/x-font-ttf
		application/font-woff
		application/x-web-app-manifest+json
		application/xhtml+xml
		application/xml
		font/opentype
		image/svg+xml
		image/x-icon
		text/css
		text/plain
		text/x-component
		;
		# text/html is always compressed by HttpGzipModule
}


server {
	listen 8081;
	server_name
		site1.local
		;

	root /home/frappe/frappe-bench/sites;

	


	location /assets {
		try_files $uri =404;
	}

	location ~ ^/protected/(.*) {
		internal;
		try_files /site1.local/$1 =404;
	}

	location /socket.io {
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
		proxy_set_header X-Frappe-Site-Name site1.local;
		proxy_set_header Origin $scheme://$http_host;
		proxy_set_header Host $host;

		proxy_pass http://frappe-bench-socketio-server;
	}

	location / {
		try_files /site1.local/public/$uri @webserver;
	}

	location @webserver {
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header X-Frappe-Site-Name site1.local;
		proxy_set_header Host $host;
		proxy_set_header X-Use-X-Accel-Redirect True;
		proxy_read_timeout 200;
		proxy_redirect off;

		proxy_pass  http://frappe-bench-frappe;
	}

	# error pages
	error_page 502 /502.html;
	location /502.html {
		root /home/frappe/.bench/bench/config/templates;
		internal;
	}

	# optimizations
	sendfile on;
	keepalive_timeout 15;
	client_max_body_size 50m;
	client_body_buffer_size 16K;
	client_header_buffer_size 1k;

	# enable gzip compresion
	# based on https://mattstauffer.co/blog/enabling-gzip-on-nginx-servers-including-laravel-forge
	gzip on;
	gzip_http_version 1.1;
	gzip_comp_level 5;
	gzip_min_length 256;
	gzip_proxied any;
	gzip_vary on;
	gzip_types
		application/atom+xml
		application/javascript
		application/json
		application/rss+xml
		application/vnd.ms-fontobject
		application/x-font-ttf
		application/font-woff
		application/x-web-app-manifest+json
		application/xhtml+xml
		application/xml
		font/opentype
		image/svg+xml
		image/x-icon
		text/css
		text/plain
		text/x-component
		;
		# text/html is always compressed by HttpGzipModule
}

revant_one · January 23, 2018, 7:41am

Revised the gist.

jhe01 · January 23, 2018, 7:42am

thanks! I’ll try it out!

jhe01 · January 23, 2018, 7:49am

@revant_one,

nginx successfully restarted without any error.

But i still got an error message (not related to nginx) “Cross-Origin Request Blocked”. Why is that?