I got the error
Failed to load https://store-cmr1f5oakh.mybigcommerce.com/api/v2/products: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://tim-yma5.mybigcommerce.com' is therefore not allowed access. The response had HTTP status code 401.
I used ajax to call the api
$.ajax({
url: "https://url/api/v2/products",
beforeSend: function(xhr){
xhr.setRequestHeader("Authorization", "Basic " + btoa("username" + ":" + "token"));
},
type: 'GET',
dataType: 'json',
success: function(data){
console.log("api_success");
}
});
How can i avoid No 'Access-Control-Allow-Origin' ?
try to modify the data type to jsonp
$.ajax({
url: "https://url/api/v2/products",
beforeSend: function(xhr){
xhr.setRequestHeader("Authorization", "Basic " + btoa("username" + ":" + "token"));
},
type: 'GET',
dataType: 'jsonp',
success: function(data){
console.log("api_success");
}
});
you can use also in your HTML :
<head>...<meta http-equiv="Access-Control-Allow-Origin" content="*">...</head>
but you'd better configure your webserver or webapp to send this header
Related
Site works completely OK on other hosting. That is also shared. But doesn't work on current hosting when an Ajax post request is made. The server(not app) responds with 403.
What should I do now? I used postman and it works okay. No problem in url also.
Update:
the code for ajax request:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: data,
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json'
});
The problem was "not setting" content-type in headers.
I changed the code into:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: JSON.stringify(data),
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json',
headers: {
'Content-Type':'application/json'
}
});
And it worked.
I got simple ajax call i could not get why it is not running success method despite the fact that chrome developer tools show that it is getting the response for the request.
$( document ).ready(function() {
var url_API="http://moviesapi.herokuapp.com/cinemas/find/"+"PL15RH";
$.ajax({
type: 'GET',
url: url_API,
dataType: "jsonp",
crossDomain:true,
success: function (response) {
alert(1);
}
});
});
The API doesn't support jsonp. You're getting 500 (Internal Server Error).
It does support JSON, but you're getting the classic No 'Access-Control-Allow-Origin' header is present on the requested resource CORS error. You need to explicitly send the Access-Control-Allow-Origin header on your heroku API:
Header property:
Access-Control-Allow-Origin: *
A more verbose solution: "No 'Access-Control-Allow-Origin' header is present on the requested resource"
try this:
jQuery(document).ready(function($) {
var url_API="http://moviesapi.herokuapp.com/cinemas/find/"+"PL15RH";
$.ajax({
type: 'GET',
url: url_API,
dataType: "json",
crossDomain:true,
success: function (response) {
alert(response);
}
});
});
I can't get my AJAX request to complete successfully. It's for the bearere token on Twitter's API. I have done successfully in a HTTP request client as shown below:
But I can't replicate this in code:
$.ajax({
type: 'POST',
url: 'https://api.twitter.com/oauth2/token',
headers: {
'Authorization':'Basic ' + base64EncodedBearerTokenCredentials,
},
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
data: {
'grant_type': 'client_credentials'
},
error: function(xhr, status, error) {
},
success: function(response){
},
});
I'm getting a 405, but because I have the Authorization header in I can't see the response in Firebug.
What is it?
Thanks.
I am facing this issue
405 (HTTP method GET is not supported by this URL)
whereas the method is post in my code
$.ajax({
url: myUrl + "?" + "token=" + AccessToken + "&key=" +dev_key,
jsonp: 'callback',
dataType: 'jsonp',
type: 'post',
data: sendXML,
success: function (result) {
alert("hjgh");
}
});
function callback(json)
{
alert("ghj");
}
You specified 'jsonp' as your 'dataType'. That will cause the method to be 'GET', overriding your 'type' settings.
Doing an ajax get request works as expected using the following code:
$.ajax({
type: "GET",
contentType: "application/json",
url: "http://someSeceretUrl/test/document,
dataType: "jsonp",
success: function(msg) {
console.log(msg);
},
error: function(a,b,c) {
console.log(a);
console.log(b);
console.log(c);
}
});
But a PUT ajax call using the following code:
$.ajax({
type: "PUT",
contentType: "application/json",
url: "http://someObscureURL/test/mrmer1",
dataType: "jsonp",
data: {"name":"mike"},
success: function(msg) {
console.log(msg);
},
error: function(a,b,c) {
console.log("XMLHttpRequest: " + a);
console.log("textStatus: " + b);
console.log("errorThrown: " + c);
}
});
results in the following console output:
XMLHttpRequest: [object XMLHttpRequest]
textStatus: null
errorThrown: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "http://static.kobj.net/kobj-static-20100219162227.js Line: 371"]
I am thinking that something is blocking the PUT request, but I don't know.
What am I doing wrong?
Thanks!
I suppose you are hitting cross domain restrictions. I wouldn't be surprised if http://username:password#somehost is considered as cross domain.
When I've done PUT requests in the past, I've found that not passing the contentLength header results in an exception being thrown, just a thought