I'm able to authenticate on Chrome, Safari etc. except Firefox.
the authentication flow url is
https://accounts.spotify.com/authorize?client_id={clientId}&response_type=code&redirect_uri=http://localhost:8080/api/callback&scope=playlist-modify-private%20playlist-read-private%20user-read-private&state=
I get error of
error: 'invalid_grant',
error_description: 'Invalid authorization code'
},
headers: {
date: 'Tue, 27 Jul 2021 12:41:04 GMT',
'content-type': 'application/json',
'set-cookie': [
'__Host-device_id=AQCdPASWLqstG_ETwdZUSE3OjrrjhV2-9IOc0sxdvUy_bkMgdPA5iU0rDpwPcy4c7gt-rJf1ujGqNK6eXsm1kHDSKdgXabGa2bc;Version=1;Path=/;Max-Age=2147483647;Secure;HttpOnly;SameSite=Lax',
'sp_tr=false;Version=1;Domain=accounts.spotify.com;Path=/;Secure;SameSite=Lax'
],
'sp-trace-id': '3663508cfc2723f5',
'strict-transport-security': 'max-age=31536000',
'x-content-type-options': 'nosniff',
'content-encoding': 'gzip',
vary: 'Accept-Encoding',
server: 'envoy',
via: 'HTTP/2 edgeproxy, 1.1 google',
'alt-svc': 'clear',
connection: 'close',
'transfer-encoding': 'chunked'
},
statusCode: 400
}
I need some help to use an API (Easy!Appointment).
I try to use some ajax code to create a new customer profile from my site into the API database, but I receive an error 500.
I send the same request by postman and it worked.
I already use a GET type request with ajax to display some info from the datadase into my site view and it worked juste fine too.
I have only problem with the POST request, from my site.
Can you help me to make it work ? Thanks ! :-)
Here the ajax code who doesn't work :
$.ajax({
type: "POST",
url: "http://localhost/easyappointment-test/index.php/api/v1/customers",
dataType: 'json',
data: {
"firstName": "John",
"lastName": "Doe",
"email": "jo...#doe2.com",
"phone": "0123456789"
},
headers: {"Authorization": 'Bearer dbhf6da4ew7nw79bhvaays',
"Content-Type" :'application/json'},
success: function (data){
console.log(data);
},
error: function (err){
console.log(err);
}
});
Thanks for your help ! :-)
PS : Sorry for my poor english !
stringify data before sending
$.ajax({
type: "POST",
url: "http://localhost/easyappointment-test/index.php/api/v1/customers",
dataType: 'json',
data: JSON.stringify({
"firstName": "John",
"lastName": "Doe",
"email": "jo...#doe2.com",
"phone": "0123456789"
}),
headers: {"Authorization": 'Bearer dbhf6da4ew7nw79bhvaays',
"Content-Type" :'application/json'},
success: function (data){
console.log(data);
},
error: function (err){
console.log(err);
}
});
I am trying to do an axios GET call on my NativeScript-Vue application to an ASP.Net WebAPI backend.
On a VueJS web application, I am using the following code:
axios.get(url).then((response) => {
console.log(response)
}, (err) => {
console.log(err)
})
And the above code works fine. But as soon as I use it to my NativeScript Vue application, I am not getting anything.
The console.log shows the following:
status: null,
statusText: '',
headers: {},
config:
{ adapter: { [Function: xhrAdapter] [prototype]: [Object], [name]: 'xhrAdapter', [length]: 1 },
transformRequest: { '0': [Object] },
transformResponse: { '0': [Object] },
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: { [Function: validateStatus] [prototype]: [Object], [name]: 'validateStatus', [length]: 1 },
headers: { Accept: 'application/json, text/plain, */*' },
method: 'get',
url: 'THE_URL_HERE',
data: undefined },
request:
{ UNSENT: 0,
OPENED: 1,
HEADERS_RECEIVED: 2,
LOADING: 3,
DONE: 4,
_responseType: '',
textTypes:
[ 'text/plain',
'application/xml',
'application/rss+xml',
'text/html',
'text/xml',
[length]: 5 ],
_listeners: {},
_readyState: 4,
_options:
{ url: 'THE_URL_HERE',
method: 'GET',
headers: [Object] },
timeout: 0,
onreadystatechange: { [Function: handleLoad] [length]: 0, [name]: 'handleLoad', [prototype]: [Object] },
onerror: { [Function: handleError] [length]: 0, [name]: 'handleError', [prototype]: [Object] },
ontimeout: { [Function: handleTimeout] [length]: 0, [name]: 'handleTimeout', [prototype]: [Object] },
_errorFlag: true,
_response: null,
_responseTextReader: null,
_headers: null,
_status: null } }
Following the instructions posted on this article: Make Http Requests
I am able to get some data (pretty much I replaced my url in my sample code above to point to the URL in the article.
I did some investigation and I also found out that in the Chrome Debugging Tools, this is what's being returned by Make HTTP Requests article:
status: 200,
statusText: 'OK',
headers:
{ 'content-type': 'application/json',
'access-control-allow-origin': '*',
'set-cookie':
[ '__cfduid=d0755ff1a9e3a35137412056bfab86b221539838285; expires=Fri, 18-Oct-19 04:51:25 GMT; path=/; domain=.pokeapi.co; HttpOnly; Secure',
[length]: 1 ],
server: 'cloudflare',
'access-control-allow-methods': 'GET, OPTIONS',
'content-encoding': 'br',
'access-control-allow-headers': 'Authorization, Origin, X-Requested-With, Content-Type, Accept',
'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
date: 'Thu, 18 Oct 2018 04:51:25 GMT',
'cf-ray': '46b863c5a8552a4f-SEA',
vary: 'Accept-Encoding',
'last-modified': 'Sat, 22 Sep 2018 23:55:29 GMT' },
config:
{ adapter: { [Function: xhrAdapter] [length]: 1, [name]: 'xhrAdapter', [prototype]: [Object] },
transformRequest: { '0': [Object] },
transformResponse: { '0': [Object] },
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: { [Function: validateStatus] [length]: 1, [name]: 'validateStatus', [prototype]: [Object] },
headers: { Accept: 'application/json, text/plain, */*' },
method: 'get',
url: 'https://pokeapi.co/api/v2/pokemon/?limit=151',
data: undefined },
request:
{ UNSENT: 0,
OPENED: 1,
HEADERS_RECEIVED: 2,
LOADING: 3,
DONE: 4,
_responseType: 'json',
textTypes:
[ 'text/plain',
'application/xml',
'application/rss+xml',
'text/html',
'text/xml',
[length]: 5 ],
_listeners: {},
_readyState: 4,
_options:
{ url: 'https://pokeapi.co/api/v2/pokemon/?limit=151',
method: 'GET',
headers: [Object] },
timeout: 0,
onreadystatechange: { [Function: handleLoad] [length]: 0, [name]: 'handleLoad', [prototype]: [Object] },
onerror: { [Function: handleError] [length]: 0, [name]: 'handleError', [prototype]: [Object] },
ontimeout: { [Function: handleTimeout] [length]: 0, [name]: 'handleTimeout', [prototype]: [Object] },
_errorFlag: false,
_response: { count: 949, next: null, previous: null, results: [Object] },
_responseTextReader:
{ [Function]
[arguments]: null,
[caller]: null,
[length]: 0,
[name]: '',
[prototype]: [Object] },
_headers:
{ 'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Set-Cookie': '__cfduid=d0755ff1a9e3a35137412056bfab86b221539838285; expires=Fri, 18-Oct-19 04:51:25 GMT; path=/; domain=.pokeapi.co; HttpOnly; Secure',
Server: 'cloudflare',
'access-control-allow-methods': 'GET, OPTIONS',
'Content-Encoding': 'br',
'access-control-allow-headers': 'Authorization, Origin, X-Requested-With, Content-Type, Accept',
'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
Date: 'Thu, 18 Oct 2018 04:51:25 GMT',
'cf-ray': '46b863c5a8552a4f-SEA',
Vary: 'Accept-Encoding',
'Last-Modified': 'Sat, 22 Sep 2018 23:55:29 GMT' },
_status: 200 } }
I am already quite stuck on what to do next for this issue. Notice there are some difference on the console.log(response) using my URL, and the URL provided on the article.
I tried my API call in Postman and I am getting some data.
I also tried the Pokemon API call in Postman and getting some data as well. So not really sure which thing to investigate next.
UPDATE: For those asking the URL of my WebAPI, I have it here:
http://angeloaa-001-site1.itempurl.com/menucategory
You can try that link even in the browser (or postman) and you would see the data being returned as well.
Looking forward to some insights and responses,
One thing I notice is that your api does not return the Access-Control-Allow-Origin header in the response, it's just an empty object headers: {}
If you look at the response from the Make HTTP Requests article, it's includes the header 'access-control-allow-origin': '*'
And why do you need this header?
By default, browser implements the same origin policy which basically means that your browser will only allow your code to fetch data from the same origin. So if your api and your client is under different domains, you need to tell the browser to allow communication between the two. This is done by enabling CORS, cross origin request sharing, which basically is controlled by the Access-Control-Allow-Origin header in the api response.
To enable the cors in the api, follow this
Ext JS 6.2.x is used. A combo is created. It uses ajax proxy request:
Request .../rest/maps/tree?_dc=1519213286176&page=1&start=0&limit=25
Request Method:GET
Status Code:200 OK
Accept:*/*
Accept-Encoding:gzip, deflate, br
Response headers:
Cache-Control:no-cache, no-store, must-revalidate
Connection:keep-alive
Content-Type:application/json
In response body a set of years is returned:
["2015","2017","2018","2019","2016","2020"]
Here is a code:
Ext.define('MapsYears', {
// extend: 'Ext.data.ArrayStore',
extend: 'Ext.data.Store',
alias: 'store.maps-years',
autoLoad: true,
fields: ['year'],
proxy: {
type: 'ajax',
url: 'rest/maps/tree'
}
});
Ext.define('Main.panel.SnapshotNow', {
xtype: 'snapshotNow',
extend: 'Ext.panel.Panel',
requires: [
],
items: [{
id: 'SnapshotNow',
xtype: "combobox",
store: {
type: 'maps-years'
},
displayField: 'year',
valueField: 'year'
}]
});
Items are loaded, I can even click on the combo, and the item appears as a chosen, but a list of items is not visible:
What do I miss?
UPDATE: In a response, it is not actually a json-format. I can fix this issue by changing rest service and returning a correct json. The question is, is there a way to tell ExtJS to process correctly list of elements in the original example, that looks like:
["2015","2017","2018","2019","2016","2020"]
This should fix your data structure
Ext.define('MapsYears', {
extend: 'Ext.data.Store',
alias: 'store.maps-years',
autoLoad: true,
fields: ['year'],
proxy: {
type: 'ajax',
url: 'rest/maps/tree',
reader: {
type: 'json',
transform: data => data.map(year => ({year}))
}
}
});
So here is my code, i've already made the oauth handshake, and that has given me the authentication token which i'm including in my header. I am simply trying to batch insert some features into an existing table. I keep getting a 400 "parseError" - This API does not support parsing form-encoded input.
Here's some of my code. I have no idea where i'm derping any ideas.
$(document).ready(function(){
$('.pickTrip').bind('click', function(){
var pointData = {
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-87.397980,
44.795067
]
},
"properties": {
"gx_id": "1242342",
"name": "Jimmy Choo",
"phone": "(920)555-4242",
"email": "jchoo#aol.com",
"vehicle": "mazda, b2300, 1994"
}
}
]
};
console.log(pointData);
var url = "https://www.googleapis.com/mapsengine/v1/tables/{table id}/features/batchInsert";
jQuery.ajax({
type: "POST",
url: url,
data: pointData,
dataType: 'application/json',
headers: {
'Authorization': 'Bearer ' + authResult.access_token
},
success: function(response) {
// Log the details of the Map.
console.log(response);
},
error: function(response) {
response = JSON.parse(response.responseText);
console.log("Error: ", response);
}
});
});
});
jQuery takes the object provided in the 'data' parameter and turns the key/value pairs into an encoded query string. You will want to send the raw JS object and make sure it's not marked as form encoded. To do that, change the 'dataType' parameter to 'contentType' and update the data value to take the "stringified" version of the JSON object.
Like this:
data: JSON.stringify(pointData),
contentType: 'application/json',