No 'Access-Control-Allow-Origin' header is present on the requested resource

1

I am trying to use API’s provided by Frappe to access content on a different domain.
However, I am facing issues with the same.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<button onclick="submitForm()">Click Me</button>
<div id="resp">
</div>


<button onclick="GetOne()">Get One</button>
<div id="get_one">
</div>


<script type="text/javascript">


data2 = {
usr: '***',
pwd: '***',

}


function submitForm(){
$.ajax({

url:"https://***/api/method/login",
data: data2,
method:'POST',
crossDomain: true,
dataType:'JSON',
success:function(data){
alert('success'+" "+data+" "+data.message+' ' +data.full_name)
},

error:function(XMLHttpRequest,textStatus,errorThrown){
alert("error"+errorThrown);
console.log(errorThrown);
$("#resp").html("ERROR"+errorThrown);
}
});
}; 	



function GetOne(){
$.ajax({
   url:"https://***/api/resource/Person",
	type: "GET",
 
    dataType: 'JSON',
    async: true,
    crossDomain: true,
    usr:"***",
    pwd:"***",
    xhrFields: {
       withCredentials: true;
    },
    
success:function(data){
alert('success')
},

error:function(XMLHttpRequest,textStatus,errorThrown){
alert("error"+errorThrown);
console.log(errorThrown);
$("#resp").html("ERROR"+errorThrown);

}
});
};

</script>
</body>
</html>

Login works perfectly fine, however, subsequent API calls give the cross origin error.

I have already added the allow origin headers in nginx config file.

On a Side Note, all calls are working correctly in Postman.
And when I login on my website in another tab, the API calls work correctly without any errors.

Any help is appreciated!
Thanks!

[Screens]
Loggen in Successfully >

image.png1366×768 127 KB

Error in further calls

image.png1366×768 127 KB

The error log in console:
Earlier when header had parameter *

XMLHttpRequest cannot load https://***/api/resource/Contact. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'https://###' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

After that I changed * to ’ https://### ’ i.e. the website I was trying to call API’s from.
Still getting cross origin error!

Basically, I think the error is with setting cookies, I would like to know how you guys are storing sessions for API calls.

2

This is nginx issue.

Add follwoing details in nginx location block.

 add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

reference: enable cross-origin resource sharing

1 Like
3

This is not secure.

Your password is exposed in the javascript source.

looking at the screenshots both servers are frappe servers.

user frappeclient and server side calls, you won’t face cors issue there.

1 Like
4

Shared a solution here :

1 Like