I called an API with the return is supposed to be a JSON object. When I run it on Google chrome, safari, edge, the return is an object which is correct. But when I try it on Mozilla, it returns a text :
H4sIAAAAAAAA/4yOwU7rMBBF9+8rnu46RuPEbWMv2fADrNhEY3uMLJo4cp1KVdV/R0Ug2MF25tyjc0UoUeB6og5VTtuxwV2RI5zuEMq88nKZFp4FDo/HTXyu8f9TLduK738sM+cFDv6TeL0DD6HM6JBP01mWWCpc4uNJPi4cWj4LXKubdFhrDjKtUqe3GY46rFzbInW6d2BIfkjGitKajDLGsrK7kZUZyerD4InJ3GOqcJM4cYNDTz0pMkrrZ+pdT263f0GHucSc8i/Ql8hf4BDSyHtrvTrExMp4zWoU0opsSEO00SZKP8V/H91u/94DAAD//2TPZVR+AQAA
which will return an error if I run response.json();
Anyone has the solution for this?
Here's my fetch API code
fetch(BASE_URL + urlPath, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
}
})
.then((response) => {
return response.json();
})
Here's the header request from mozilla :
Accept
application/json
Accept-Encoding
gzip, deflate, br
Accept-Language
id,en-US;q=0.7,en;q=0.3
Authorization
Bearer xxx
Cache-Control
max-age=0
Connection
keep-alive
Content-Type
application/x-www-form-urlencoded
Host
api-test.id
Origin
http://localhost:3000
Referer
http://localhost:3000/dashboard
TE
Trailers
User-Agent
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0
And this is from Chrome :
:authority: api-test.id
:method: GET
:path: /test/path
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7,id;q=0.6
authorization: Bearer xxx
origin: http://localhost:3000
referer: http://localhost:3000/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
Thanks
please try this code:
fetch(BASE_URL + urlPath,{headers: {
'authorization': `Bearer ${token}`,
'Content-Type': 'application/x-www-form-urlencoded'
}})
.then(response=>response.json())
.then(data=>{
console.log(data);
return data
}
);
Related
I'm using this code
const { status, data } = await axios({
method,
url,
headers: {
'Accept-Language': userInfo.locale,
'Content-Type': 'application/json',
Authorization: `Bearer ${token.accessToken.jwtToken}`,
},
data: {
requesterSubscription: token.accessToken.payload.sub,
...body,
},
});
But when I print what I'm receiving on the headers on the API I get:
host: 'XXX.X.X.X:XXXX',
connection: 'keep-alive',
pragma: 'no-cache',
'cache-control': 'no-cache',
accept: '*/*',
'access-control-request-method': 'POST',
'access-control-request-headers': 'authorization,content-type',
'access-control-request-private-network': 'true',
origin: 'http://XXX.XXX.XX.X:XXXXX',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36',
'sec-fetch-mode': 'cors',
'sec-fetch-site': 'cross-site',
'sec-fetch-dest': 'empty',
referer: 'http://XXX.XXX.XX.X:XXXXX/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7,fr;q=0.6,la;q=0.5'
So it isn't receiving my authorization and I'm getting errors because of it, there are no other possible places it could be making this request from.
So First (1) question: Where do you store your access token?
In memory
In storage (localStorage or sessionStorage). Bad practices
Second (2) question: Do your retrieve data has requesterSubscription key?
Third : I hope your passing the the url and the method values?
Solution:
I really recommend you to read axios docs.
Also, it is better to create an export a axiosInstance (with a base config. Docs), append interceptors on it for process before and after request.
Tips:
With the interceptors you can automatically append the token in the request header of your created instance (so you wont have to do it for further request).
Also check for your access token expiration and automatically ask for a new access token with a valid stored refresh token
Do not forget to configure CORS on your API server.
I am trying to do a fetch() post and send a FormData object and an Int. I can do one or the other but when trying to send both I get unrelating 415 status codes.
My post data looks like:
var payload = {
documents: documents, // which is of type new FormData()
applicationId: applicationId // which is of type int
}
method: "POST",
headers: {
"Authorization": `Bearer ${accessToken}`
},
body: payload
And my c# backend looks like below:
[HttpPost]
public async Task<JsonResult> UploadDocuments(DocumentUploadVm payload)
below is my request headers:
:authority: localhost:44343
:method: POST
:path: /api/expert/UploadDocuments
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
authorization: Bearer eyJraWQiOiJYNnplamszSy10RjBkMmtWYXpHNE84aFNsUGtSSklhT1ZMeGQ3dC1tQ21FIiwiYWxnIjoiUlMyNTYifQ.eyJ2ZXIiOjEsImp0aSI6IkFULnRuaGFQVGp5RnY4eEhMaGFVM18zLW5rdlVLWV9QUEw5aXJTczI4NHF3c3ciLCJpc3MiOiJodHRwczovL2Rldi04NzAzMTAub2t0YS5jb20vb2F1dGgyL2RlZmF1bHQiLCJhdWQiOiJhcGk6Ly9kZWZhdWx0IiwiaWF0IjoxNjAwNjQ0MzAzLCJleHAiOjE2MDA2NDc5MDMsImNpZCI6IjBvYXAzbmdtNG1BUDBTT1YzNHg2IiwidWlkIjoiMDB1ZGFudnVpUjB6SHp6emk0eDYiLCJzY3AiOlsicHJvZmlsZSIsImdyb3VwcyIsImVtYWlsIiwib3BlbmlkIiwicGhvbmUiXSwic3ViIjoiZGFuaWVsOTVicm93bkBnbWFpbC5jb20ifQ.0ya1CTLuPQcPLyXgph7TQMzwhWtUWrb1QzQx6G2kS4X5fawXZ13XFIztG2TMjCIrTrbGa1WPx-hYmqI7EB2Eilhp0ekQKt85U7Q3Ug5HuQQMhrH8KjvHF5fhElNwf5z1vp4Zgtg1MbF-MPetoV4ttG3SQwxLJ-SFHZFkA-HY2lzoMQS-40V53q5ruVbeXEpX8iwhSXzA7mp53YEaSNWecDJxHoBy6yXszrJrpkQ1wqsp9p5ti1XASVczlLkL-J-IOx6Rf61LfPH9_Q4KR3aZsd_peInJF14YF0lLesmxcnQcvbdMGsUO0PrPtku8wQEeuuQGYn-zZR5eBSDR9ZbzLw
content-length: 15
content-type: text/plain;charset=UTF-8
origin: http://localhost:8080
referer: http://localhost:8080/expert/register
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
I have tried using the [FromBody],[FromForm] tags, stringifying and everything in between to no avail. Any help would be greeeeeeeatly appreciated as I am losing my mind.
control:no-cache` field into my request when requesting RSS feed
I cant quit figure what values should i put in
In case of Content-type it works well but it refuses to add correctly Cachce-Control
code :
options = {uri :SUPPORT_FEED_URI,
headers : {
'Content-Type': 'application/x-www-form-urlencoded',
'Cache-Control': 'no-cache'
},
}
request.get(options)
.on('error', (err) => { reject(err); })
.pipe(feedparser)
.on('end', () => { return resolve(items); });
What i get in request headers :
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:cache-control <-- doesnt seems to be right Want something like Cache-Control : no-cache
Access-Control-Request-Method:GET
Connection:keep-alive
Host: xxxx.yyyy.zz
Origin:http://127.0.0.1:8888
Referer:http://127.0.0.1:8888/webconsole/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
content-type:application/x-www-form-urlencoded
Your capture is a CORS pre-flight (OPTIONS) request as the URL is on a different domain or considered to be different-origin.
Such a request will not include custom headers, they are added to Access-Control-Request-Headers instead to see if the destination server will allow them.
If the destination server responds with an acceptable allow- response the subsequent GET will include your header.
Depends what you are trying to achieve.
If you are trying to force a non-cached response and dont have control over the server, one thing you can do is to add a fake query param like this.
options = {
uri :`${SUPPORT_FEED_URI}?${new Date().getTime()}`,
headers : {
'Content-Type': 'application/x-www-form-urlencoded'
},
}
For more information on the 'Cache-Control' header see the top answer here.
What's the difference between Cache-Control: max-age=0 and no-cache?
I am using fetch for REST API in reactJS, and passing cookie using
credentials: "include"
But its not working for (**IP based url). here is my Response Header configuration.
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, X-CSRF-Token, X-Auth-Token, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding
Access-Control-Allow-Methods:POST, GET
Access-Control-Allow-Origin:http://localhost:8080
Content-Length:93
Content-Type:application/json; charset=UTF-8
Date:Sun, 24 Jul 2016 20:29:48 GMT
** my local ip is 192.168.1.4 when i am doing POST request, cookie not sending to server
fetch('http://192.168.1.4:9000/test', {
credentials: "include",
method: 'post',
mode: 'cors',
headers: {
'Accept': 'application/json'
},
body: JSON.stringify({
"username":"abd",
"passwd":"Changemes1"
})
here is request Header for local ip (192.168.1.4)
accept:application/json
Accept-Encoding:gzip, deflate
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6,hi;q=0.4,ru;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Content-Length:115
content-type:text/plain;charset=UTF-8
Host:192.168.1.4:9000
Origin:http://localhost:8080
Pragma:no-cache
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
BUT WHEN IM USING localhost instead of my local ip (192.168.1.4) THEN BROWSER SENDING COOKIE PERFECTLY
fetch('http://localhost:9000/test', {
credentials: "include",
method: 'post',
mode: 'cors',
headers: {
'Accept': 'application/json'
},
body: JSON.stringify({
"username":"abd",
"passwd":"Changemes1"
})
SEE HERE (request header, Cookie:Token=John Doe present)-
accept:application/json
Accept-Encoding:gzip, deflate
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6,hi;q=0.4,ru;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Content-Length:115
content-type:text/plain;charset=UTF-8
Cookie:Token=John Doe
Host:localhost:9000
Origin:http://localhost:8080
Pragma:no-cache
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
What is Problem with IP based url Please suggest me.
I am trying to make an ajax request like below:
function updateLastSeen() {
var url = 'http://my.url.com/conversation/' + $('#conversationId').val() + '/seen/' + $('#senderId').val();
$.ajax({
type: 'PUT',
url: url,
contentType: "application/json",
success: function(result) {
alert('Logged out')},
error: function(result) {
alert('error')
}
});
}
The request in the preflight looks like this:
Request headers
OPTIONS http://my.url.com/conversation/3/seen/3 HTTP/1.1
Host: m.url.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: null
Access-Control-Request-Method: PUT
Connection: keep-alive
And this is the response
HTTP/1.1 200 OK
Date: Wed, 15 Apr 2015 06:16:54 GMT
Server: Apache
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Keep-Alive: timeout=5, max=98
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/json
So according to me it should work. However I get an error that Method PUT is not allowed by Access-Control-Allow-Methods.
I also tried via Postman to see if there is a problem with the backend (which is totally obscure to me) but via Postman it works! So what am I doing wrong?
The request headers with postman:
PUT /conversation/4/seen/3 HTTP/1.1
Host: my.url.com
Connection: keep-alive
Content-Length: 0
Pragma: no-cache
Cache-Control: no-cache
Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
Content-Type: text/plain;charset=UTF-8
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,nl;q=0.6
Cookie: _ga=GA1.2.1794721550.1428851890