I have a working curl code.
curl https://customr.heliumdev.com/api/v1/customers/6590401996 --header "Authorization: Token token="XXX""
And I want to use Ajax to achieve this code, my code is like this:
$.ajax({
url: "https://customr.heliumdev.com/api/v1/customers/6590401996",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Token token=\"XXX\"");
},
type: 'GET',
dataType: 'json',
success: function (data) {
alert(JSON.stringify(data));
},
error: function(){
alert("Cannot get data");
}
});
But I got error said that
XMLHttpRequest cannot load https://customr.heliumdev.com/api/v1/customers/6590401996. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://3c4527.myshopify.com' is therefore not allowed access. The response had HTTP status code 404.
I tried xhr.setRequestHeader("Authorization", "Token token=\"XXX\""), xhr.setRequestHeader("Authorization", "Token token=XXX"), and xhr.setRequestHeader("Authorization", "Token token='XXX'") . All of these gave me same error.
Could anyone help me to covert curl to ajax ?
Related
I'm trying to delete my vimeo video by using AJAX request but its always returning 204 status code, and video is not deleting from account. Here is code example.
$(".js-delete").click(function(){
var videoID = $(this).data("target");// /videos/2332
$.ajax({
type: "post",
url: "https://api.vimeo.com/me/videos",
headers: {
"Authorization": "bearer xxxxxxxxxxxxxxx"
},
data: {
url: "https://api.vimeo.com/me"+videoID,
method: "DELETE"
},
dataType: "json"
success: function(response){
console.log(response); //will print the whole JSON
},
error: function(){
console.log('Request Failed.');
}
});
});
Can anyone please suggest some changes required for this?
Thanks in advance
You are sending
a HTTP POST
to the URL https://api.vimeo.com/me/videos
with the Bearer token as a header
Note that it should be Bearer <token> (uppercase B), not bearer <token>.
with a data packet that contains another URL and HTTP method.
But according to the Vimeo API docs to Delete a Video, the request should be
DELETE https://api.vimeo.com/videos/{video_id}
with a note:
This method requires a token with the "delete" scope.
A jQuery ajax request should look something like this if the bearer token is correct:
$(".js-delete").click(function(){
var videoID = $(this).data("target");// /videos/2332
$.ajax({
type: 'DELETE',
url: 'https://api.vimeo.com/videos/' + videoID,
headers: {
"Authorization": "Bearer xxxxxxxxxxxxxxx"
},
success: function(response){
console.log(response); //will print the whole JSON
},
error: function(){
console.log('Request Failed.');
}
});
});
You should be able to test this request using https://www.getpostman.com/ to verify the request and bearer token works outside of your CF app.
I'm trying to make a login form using ajax post with laravel and the url must pont to the api that provided to me.
but keeps on saying 403 for bidden api.
they also provides basic Auth username and password.
here's my codes bellow. thanks
$("#login_page").submit(function(e){
$.ajax({
type:"POST",
url:"https://api.samplesample.ph/frontend/login/",
headers: {
'Authorization':"Basic **************=",
"Content-Type": "application/json",
"cache-control": "no-cache"
},
data:$("#login_page").serialize(),//only input
success: function(response){
console.log(response);
}
});
e.preventDefault();
});
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
I have a question on the chat app, Naver LINE. There is an API that provides login authentication called LINE login.
I've follow the instructions on the documents and run the querystring and I got a callback URL that gives me the code look like this,
https://sample.com/callback?code=b5fd32eacc791df&state=123abc
Now, the document says I need to use the code in a http request using post method. I got the following,
XMLHttpRequest cannot load https://api.line.me/v1/oauth/accessToken/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxx' is therefore not allowed access. The response had HTTP status code 404.
Below is the request I wrote,
$.ajax({
url: "https://api.line.me/v1/oauth/accessToken/",
type: "POST",
xhrFields: {
withCredentials: true
},
crossDomain: true,
data: JSON.stringify(data),
dataType: "json",
success: function (response) {
var resp = JSON.parse(response)
alert(resp.status);
},
error: function (xhr, status, state, error) {
alert("error", xhr, status);
console.log(xhr);
console.log(status);
console.log(state);
console.log(error);
}
});
data is the credentials I put in so LINE would pass me the user's information.
Is there anything I did wrong? If so, how can I fix this?
Thanks ahead.
So... i'm making a cross domain (CORS) call. When i initially make it on the page, it works just fine (noting that cross-domain issues aren't really a problem), but when i make another request later to the same server adding a bearer authorization token to the header, it is failing with a 401 Unauthorized.
Also, when i run this code from the same domain, both calls run successfully (identifying that the token is ok...)
Thoughts?
$.ajax({
url: apiPath.userMetaUrl(),
xhrFields: {
withCredentials: true
},
cache: false,
error: function (xhr, ajaxOptions, thrownError) {
console.log("url: " + apiPath.userMetaUrl());
console.log("fn loadUserMetaData xhr.status: " + xhr.status);
console.log("fn loadUserMetaData xhr.responseText: " + xhr.responseText);
console.log("fn loadUserMetaData thrownError: " + thrownError);
},
dataType: "json",
jsonpCallback: "callback",
beforeSend : setHeader,
success: function (data) {
//woohoo!
}
}
function setHeader(xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + authenticatedInfo.access_token);
}
Again, running this code from same domain as apiPath.userMetaURL() works fine. On a different domain, the initial call without adding request header works fine. Access-Control-Allow-Orign has the cross-domain URL added. Access-Control-Allow-Headers has Authorization added.
xhr.status returns 0 and responseText/thrownError are blank.
JSONP != ajax
These requests you are making are simply adding <script> tags to your DOM. It's just wrapped in an ajax syntax for ease of use. You can't modify the request headers in this fashion. You need to create a CORS ajax request, and configure your server to handle them.
Executing jsonp requests on the same domain though... I believe jQuery just uses an xmlHttpRequest though. For cross-domain, it uses <script> tags. This would explain the behavior you are seeing.
Consider the following.
$.ajax({
url: 'http://google.com',
dataType: 'jsonp',
beforeSend: function(xhr) { xhr.setRequestHeader('foo', 'bar'); }
});
Look at your network traffic. It will create the request, but you will not see the foo header.