I am rather new to Ionic App development and need help.
I am using Visual Studio 2015 for development and Chrome Browser with Ripple for rendering the application.
The problem is, when making an Ajax Post request to an API it gives me a 404 (Not Found error) because the POST url gets prepended with a rippleApi and TinyHippos Uri.
I am wondering what causes this prepending of the URI
The following is my Controller:
var request = $http({
method: "post",
url: myPostLink,
data: {},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
request.success(function (data) {
console.log(data);
});
Related
Currently in my web app project, I need to parse the content of a web page, and after some searching, I found that Mercury Web Parser API is quite suitable for me.
And I have some experience with such kind of third party APIs, generally speaking I can get my desired result.
But for this API, I can't find documentation about the API usage on the official website.
Based on the my study, it provide two methods:
first is cURL as following:
curl -H "x-api-key: myapikey" "https://mercury.postlight.com/parser?url=https://trackchanges.postlight.com/building-awesome-cms-f034344d8ed"
the myapikey is the API key I get from the website. Then I can get the result in JSON format, which is the main content of the web page specified by the url parameter. It works well for me, I mean the cURL method.
And on the website, it said that the second method is HTTP call, which is just what I need:
GET https://mercury.postlight.com/parser?url=https://trackchanges.postlight.com/building-awesome-cms-f034344d8ed
Content-Type: application/json
x-api-key: myapikey
So based on my understanding, I use jquery AJAX method to do this as following:
var newurl = "https://mercury.postlight.com/parser?url=http://www.businessinsider.com/joel-spolsky-stack-exchange-interview-2016-12&x-api-key=myapikey"
$.ajax({
url: newurl,
dataType: "jsonp",
success: function(data){
console.log(data.title);
}
})
here I made JSONP request because of the Cross origin issue.
But now I face 401 error message (401 Unauthorized. The request has not been applied because it lacks valid authentication credentials for the target resource)
For now my guess is that the apikey is not correctly passed to server. So based on the cURL's successful call, can I get the correct format for AJAX call?
Update:
Based on the following answers ,I tried to set the request header as following:
$.ajax({
url: newurl,
dataType: "jsonp",
beforeSend: function(xhr){
console.log(apiKey);
xhr.setRequestHeader('x-api-key', apiKey);
},
/*
headers: {
"x-api-key": "M1USTPmJMiRjtbjFNkNap9Z8M5XBb1aEQVXoxS5I",
"contentType": 'application/json'
},
*/
success: function(data){
console.log("debugging")
console.log(data.title);
},
error: function (error) {
console.log(error)
}
})
I tried both beforeSend and headers. But still can't work and get the following trackback error message:
send # jquery.js:8698
ajax # jquery.js:8166
addNewArticle # topcontroller.js:18
fn # VM783:4
e # angular.js:281
$eval # angular.js:147
$apply # angular.js:147
(anonymous) # angular.js:281
dispatch # jquery.js:4435
elemData.handle # jquery.js:4121
And for the last send function, still 401 error.
But the ajax error handling part shows that the readyState:4 and status: 404 result. So what's going here.
For your question, the curl request is sending a header which you have attached as part of the query string in your $.ajax request.
Try the following instead (using beforeSend + xhr) :
// broke this string down so you don't have to scroll
var newurl = "https://mercury.postlight.com/parser?" +
"url=http://www.businessinsider.com/" +
"joel-spolsky-stack-exchange-interview-2016-12";
// set your api key
var apiKey = "<your api key>";
$.ajax({
url: newurl,
dataType: "json",
beforeSend: function(xhr){xhr.setRequestHeader('x-api-key', apiKey);},
success: function(data){
console.log(data.title);
}
})
I'm trying to make a simple Ajax call in my app on Openshift. This is my ajax call which is triggered by pressing a button:
$.ajax({
url: 'http://my-site-name.rhcloud.com/asciimo',
method: 'POST',
data: {attr:"value"}
});
And this is node in my server.js file:
self.createRoutes = function() {
self.routes['/asciimo'] = function(req, res) {
res.send('done');
};
};
Everything works when I go to my-site-name.rhcloud.com/asciimo, but if I click a button (to get there) I get:
POST http://my-site-name.rhcloud.com/asciimo 404 (Not Found)
even though the link clearly works on it's own.
Change your method to GET
method: 'GET',
When you go to the URL directly in your browser, you are issuing a GET request, not a POST.
I know what the problem was now. In ajax there is a POST request and self.routes['/asciimo'] (given as a template by Openshift) deals with GET requests only. What solved the problem was simply rewriting my function as a separate POST function:
self.addpost = function() {
self.app.post('/asciimo', function(req, res){
res.send('done');
});
};
I am getting an error that i dont understand an cannot find any helpfull informations about:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https:*******' is therefore not allowed access. The response had HTTP status code 401.
function RecordTheCall()
{
var key = '*******************';
$.get( "https://api.plivo.com/v1/Account/"+key+"/Call/?status=live", function( data ) {
var callUuid = data.call_uuid
});
$.ajax({
url: "https://api.plivo.com/v1/Account/"+key+"/Call/"+callUuid+"/Record/",
type: "POST",
data: { 'auth_id': auth_id, 'call_uuid': CallUUID },
dataType: "json",
success: function (res) {
alert(res);
},
error: function(err) {
alert(err);
}
});
}
Call recording cannot be accomplished from the Web SDK directly. You cannot use the Plivo API from your Web browser using Javascript because cross-domain ajax requests are not allowed in browsers for security reasons.
This has been explained in this Wikipedia article. There are some work arounds to overcome this, but it is browser dependent and hence it might not work always. Instead you should use the Plivo XML/API in you application.
I am trying to make a request to the Eventbrite API. I can successfully make a call from Postman (chrome extension similar to fiddler)
url: https://www.eventbriteapi.com/v3/users/me/owned_events
Header: authentication : Bearer Y5R3SQRPRZBULIHYQHTD
This successfully gets back what I'm looking for. When I try to make the same call through AngularJS
function getLiveEvents() {
return $http.get(url, {
cache: true,
headers: {
'Authorization': 'Bearer Y5R3SQRPRZBULIHYQHTD',
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': '*/*',
}
}).then(function (response) {
return response.data;
});
}
I always get the error XMLHttpRequest cannot load https://www.eventbriteapi.com/v3/users/me/owned_events?status=live. The request was redirected to 'https://www.eventbriteapi.com/v3/users/me/owned_events/?status=live', which is disallowed for cross-origin requests that require preflight.
Is there something I can do with my AngularJS request so that it will be successful?
FYI: The access-token is real, I'm not concerned about someone using it because it's just a test account.
I have a JQuery Mobile app. This app is currently running on localhost. I am relying on some services hosted on some of my backend servers. When I run a query, I noticed in fiddler that I am getting a 302. This 302 is causing my service call to fail.
If I copy-and-paste the URL of the service in my browser window, everything works fine. Here is my JQuery code
$.ajax({
url: GetServiceUrl(),
type: "GET",
data: vm,
contentType: "application/json",
success: service_Succeeded,
error: service_Failed
});
function service_Succeeded(result) {
alert("received!");
}
function service_Failed() {
alert("oops");
}
function GetServiceUrl() {
var url = "http://www.mydomain.com/services/endpoint";
return url;
}
Why am I getting a 302 from my app?
Thank you
your service is sending a redirect request. Maybe you require a login?