I am trying to develop a web using PlanGrid API, and i getting cross domain request block error.
var apiKey="API KEY";
var password="PASSWORD";
$.ajax({
url: "https://io.plangrid.com/projects",
xhrFields: {
withCredentials: true
},
headers: {
"Authorization": "Basic " + btoa(apiKey + ":" + password),
Accept:'application/vnd.plangrid+json; version=1'
},
type: 'GET',
crossDomain: true,
success: function (data) {
console.log(JSON.stringify(data));
},
error: function(data){
console.log(JSON.stringify(data));
}
});
After ajax request, i am getting error:
"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:3000' is therefore not allowed access. The response had HTTP status code 401."
Can someone let me know where i am going wrong. thanks
Try changing https to http in ajax and see if it works.
Match the protocol same as your domain that is localhost.
Your localhost is on http.
Related
for a white i am working an api problem but always face this problem and cant find any solution.
Here is my ajax request
$(document).ready(function() {
var url = 'https://www.xeno-canto.org/api/2/recordings?query=bearded+bellbird';
$.ajax({
url: url,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
type: "GET",
dataType: "json",
data: {},
success: function(result) {
console.log(result);
},
error: function() {
console.log("error");
}
});
});
but in chrome console this result show up
Access to XMLHttpRequest at 'https://www.xeno-canto.org/api/2/recordings?query=Greater+Scaup' from origin 'https://www.birdpx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Do you have any solition?
The only way around this is to use a proxy. The proxy can retrieve the content outside of a browser and deliver it to your client. This is a common problem and there are many options such as:
https://github.com/Shivam010/bypass-cors
Hello I am using this method to read this api it giving CORS error. I have added CORS plugin with chrome then also it is not coming. Please let me know how to solve these to error.
text:
function NoCors() {
debugger;
var uName = "*****";
var passwrd = "*****";
document.write("Enter1");
var url = 'http://219.90.67.163:8207/api/Info/getgismeterdata'
$.ajax({
type: 'GET',
url: url,
crossDomain: true,
//Access-Control-Allow-Credentials: true,
contentType: 'json',
datatype: "application/json",
headers: {
"Authorization": "Basic QXBpVXNlcjpBcGlQYXNz",
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', "Basic " + btoa(uName + ":" + passwrd));
},
success: function (data) {
debugger;
console.log("data")
//Success block
},
error: function (xhr, ajaxOptions, throwError) {
//Error block
},
});
}
error in console:
1. Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
2. Access to XMLHttpRequest at 'http://219.90.67.163:8207/api/Info/getgismeterdata' from origin 'http://localhost:50362' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Before sending the GET request to server, browser automatically send and preflight OPTIONS request, and your server doesn't allow this method. You need to enable OPTIONS method support in your server side (219.90.67.163)
Are you use Bearer Token Authentication?
requst headers try this
headers: {
"Authorization": "Bearer QXBpVXNlcjpBcGlQYXNz",
},
You must setting CORS in Web API
https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
The CORS plugin you are using only works for Simple Requests.
Since you are setting an Authorization header you are making a Preflighted Request which your plugin cannot handle.
You need a different approach to handling the Same Origin Policy. Ideally, that would be proper support for CORS on the server you are making the HTTP request to but some other options are listed at the end of this answer.
I wanna make a CORS get request to, say google (just an example. I'm actually accessing a website that returns json data). Below is my ajax code:
$.ajax({
url: "https://www.google.com",
type: "get",
dataType: "json",
crossDomain: true,
success: function(data, textStatus) {
alert ("success" + data);
},
error: function(data, textStatus) {
alert ("fail" + data);
}
})
With the above code I got this error:
XMLHttpRequest cannot load https://www.google.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://sdlweb-dev:1234' is therefore not allowed access. The response had HTTP status code 405.
I tried adding code like
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "X-Requested-With,content-type",
"Access-Control-Allow-Credentials": true
}
but still got the same error.
I tried changing dataType from 'json' to 'jsonp'. This way the request is sent, but since the response isn't jsonp, I got another error:
Uncaught SyntaxError: Unexpected token <
Without modifying the server side (I mean the url that I send get request to, because I do not have access to that), can I be able to send CORS request?
Any help is appreciated!!!
Thanks,
Fei
You must have access to the server code in order to allow CORS requests.
The headers that you showed should be headers sent back in the response, not in the request.
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');
}
}
})
I have the following code:
function test(segmentId) {
var url = "http://...../api/avoidsegments/123456";
$.ajax({
url: url,
type: "PUT",
contentType: "application/json",
data : {
"appID": ig_appID,
"clientCode": ig_clientCode,
"segmentID": segmentId
},
success: function(output) {
console.log(output);
},
error: function(err) {
console.log('error: ', err);
}
});
}
I'm getting the following response:
OPTIONS http://...../api/avoidsegments/123456 401 (Unauthorized)
(index):1 XMLHttpRequest cannot load http://...../api/avoidsegments/123456.
Response for preflight has invalid HTTP status code 401
How do I fix this, and send a put request? Thanks.
You are trying to do Cross Origin HTTP Request (CORS). Solution is to enable CORS on your server side and as i can see u got 401 unauthorized so send Authorization header with requests (i dont know your authorization implementation).