Develop Reference

Get 401 when using ajax call to retrieve data from couchdb

I try to use ajax call in js file to retrieve data from couchdb.
But I got the 401 error:
Failed to load resource: the server responded with a status of 401 (Unauthorized)
Here is my js code:
var locate_data = $.ajax({
url: 'http://admin:mypassword#localhost:5984/database_name',
type:'GET',
dataType: "json",
success: function(data){
console.log("successfully loaded."),
alert(data);
},
error: function(xhr) {
console.log("error"),
alert(xhr.statusText)
}
})
I can use 'curl GET' to get the data from couchdb by using the terminal.
What is the problem? and how can I fix it?

You could use Basic access authentication where requests contain a header field in the form of Authorization: Basic <credentials>, where credentials is the Base64 encoding of username and password, joined by a single colon ':'.
This answer explains how to do the same in the context of Angular. I'm not using Ajax myself but I suppose it should look something like this.
$.ajax({
url: 'http://localhost:5984/database_name',
type:'GET',
headers: {
'Accept': 'application/json',
'Content-type', 'application/json',
'Authorization': 'Basic ' + btoa("<username>:<password>")
},
xhrFields: {
withCredentials: true
},
...

Trying to Convert jQuery ajax to ES6 fetch

In an effort to not use jQuery (if ajax is all I need it for) I have the following ajax call that works like a champ.
$.ajax({
type: "POST",
url: "/Tests/EEG/Portable/Index?handler=Testing",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
},
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("Success");
},
failure: function (response) {
alert(response);
}
});
I rewrote it in standard javascript using fetch as follows:
fetch("/Tests/EEG/Portable/Index?handler=Testing", {
method: "POST",
headers: {
'XSRF-TOKEN': $('input:hidden[name="__RequestVerificationToken"]').val(),
'content-type': 'application/json; charset=utf-8'
},
body: JSON.stringify(model)
}).then(checkStatus)
.then(function (data) {
alert("second then");
}).catch(function (error) {
console.log(error);
});
Which gives me the following error:
Failed to load https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:58659' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Which leads me to add the following attribute:
mode: 'no-cors'
Which gives me the following warning (and does not get to my backed method)
Current.js:78 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx&RelayState=q-9E0I4hwfJLlInurXY-Yu4g with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Which lead me to add the following:
'X-Content-Type-Options': 'nosniff'
Which gave me the same warning and still did not get to my server.
Any thoughts on what I am still missing?
Update
While looking around the Network tab on Chrome's debugger tools, I noticed the Copy as fetch option. I did this on the working jQuery call and gave me the following JavaScript:
fetch("http://localhost:58659/Tests/EEG/Portable/Index?handler=Testing", {
"credentials": "include",
"headers": {},
"referrer": "http://localhost:58659/Tests/EEG/Portable",
"referrerPolicy": "no-referrer-when-downgrade",
"body": JSON.stringify(model),
"method": "POST",
"mode": "cors"
});
When I run that fetch method I get a 400 Bad request error.

I would say that thanks to #Wesley Coetzee that got the ball rolling in the right direction. What took care of it for me was the following code:
fetch('/api/Tests/Single', {
credentials: 'include',
headers: {
'XSRF-TOKEN': $('input:hidden[name="__RequestVerificationToken"]').val(),
'content-type': 'application/json; charset=utf-8',
'X-Content-Type-Options': 'nosniff'
},
referrer: '/Tests/EEG/Portable',
referrerPolicy: 'no-referrer-when-downgrade',
body: JSON.stringify(model),
method: 'POST',
mode: 'cors'
});
A little back story in case that helps: Everything in the question was based on trying to POST to an ASP.Net Core RazorPage event. After some realization between this new project we are starting and the extra pain you have to go through (not the above code) to convert a response to an actual entity, we changed to using WebAPI. The code in this answer is going to a WebAPI controller and no longer a RazorPage method.
Hope it helps someone.

google invisible reCaptcha server side validation is failing

i have integrated the invisible reCaptcha in my application and the client side response is coming as part of solving the image challenge. i am then calling a angular function to validate user response on server side using below code. where onloginSubmit(token) is the success call back.
<button id="btnLogin" ng-disabled="loginForm.$invalid"
class="g-recaptcha primarybtn margin-left-zero form-control-input"
data-sitekey="{{public_key}}"
data-callback='onloginSubmit'>{{'label_login' |
translate}}</button>
<script>
function onloginSubmit(token) {
angular.element(document.getElementById('loginForm')).scope().verifyReCaptcha(token);
};
</script>
in angular i am calling the verifyReCaptcha as below.
$scope.public_key = "------ My Site Key -------";
$scope.private_key = "------ My Secret Key -------";
$scope.verifyReCaptchaURL = "https://www.google.com/recaptcha/api/siteverify";
$scope.verifyReCaptcha = function(reCaptchaToken){
var captchaData = {
secret : $scope.private_key,
response : reCaptchaToken
}
$http({
headers: {
'Accept': 'application/json,text/plain',
'Content-Type': 'application/json;application/x-www-form-urlencoded;charset=utf-8;',
},
url: $scope.verifyReCaptchaURL,
method: 'POST',
data: captchaData
}).success(function (data) {
console.log("success");
$scope.login();
}).error(function (data) {
console.log("error");
$window.location.reload(true);
});
};
when i hit the api service https://www.google.com/recaptcha/api/siteverify . i get the below error.
Failed to load https://www.google.com/recaptcha/api/siteverify: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 405.
i couldnt find more documentation for the issue.
what is it that i am doing wrong and also if there is any error the recaptcha does not come up and the login button which i am using fails to respond.
n the request i am mentioning the Method as Post, the method is over ridden as Options and the request payload which i am sending is not present. this is what i got in the networks tab
Request URL:https://www.google.com/recaptcha/api/siteverify
Request Method:OPTIONS
Status Code:405
Remote Address:10.120.118.50:8080
Referrer Policy:no-referrer-when-downgrade

Most of the thing you did a great job. One thing is to require in your application is communicate to an external domain so you can include HTTP header content type is include a JSONP format.
$http({
headers: {
'Accept': 'application/json,text/plain',
'Content-Type': 'application/jsonp;application/x-www-form-urlencoded;charset=utf-8;',
},
url: $scope.verifyReCaptchaURL,
method: 'POST',
data: captchaData
}).success(function (data) {
console.log("success");
$scope.login();
}).error(function (data) {
console.log("error");
$window.location.reload(true);
});

CORS issue while submitting data to google forms in angular

While submitting the data :
Error Message : XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8090' is therefore not allowed access. The response had HTTP status code 405.
$scope.postDataToGoogle = function(){
$http({
method: 'POST',
crossDomain: true,
url: 'https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXXXXXXX/formResponse',
// dataType: "xml",
data: tempData,
}).success(function(data,status){
//alert(data)
console.log("Success");
}).error(function(data,status) {
console.log('Error:' + status);
});
}

Its not about jquery or angular, CORS allows or disallow done by Back-end server.
Google might not support this.(to access https://docs.google.com)
CORS (Cross-Domain Resource Sharing) allows you to more cleanly separate your front-end from your back-end.
CORS is a group of special response headers sent from the server that tell a browser whether or not to allow the request to go through
Access-Control-Allow-Origin: http://example.com.
Why does jQuery throw an error when I request external resources using an Appcache Manifest?

I do have tried with angular still not able solve it, but with jQuery its works for me.
$.ajax({
url: 'https://docs.google.com/forms/d/xxxxxxxxx',
data: tempData,
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
alert('error');
},
200: function () {
alert('Thank you for your valuable feedback');
}
}
})

POST gets converted to GET, when sending request via local apache

I am trying to send a post request with the following code. But the request goes as GET request, instead of POST. How to fix this.
$.ajax({
url: 'https://www.exampleurl.com',
method: 'POST',
headers: {"Access-Control-Allow-Origin": true},
data: {url:'bla',call:"trans"}
dataType: 'jsonp',
success: function(data){
console.log('succes: '+data);
}
});
This is the error I am getting
XMLHttpRequest cannot load https://example.com. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.
When removed the header Access-Control-Allow-Origin, I am getting a 404 error

I don't think, you can use a POST method with jsonp request. jsonp callbacks only for with GET method. Have a look at link .

You don't have to pass parameters in url attribute when you want to send POST request you should use data attribute instead, take a look at jQuery.ajax() :
$.ajax({
url: 'https://www.exampleurl.com',
method: 'POST',
data: {q:1, q2:2},
headers: {"Access-Control-Allow-Origin": true},
dataType: 'jsonp',
success: function(data){
console.log('succes: '+data);
}
});
Hope this helps.