Develop Reference

Axios interceptor does not set Authorization header on mobile device

I am using an Axios interceptor in my React application to add an Authorization header. This works fine on desktop browsers (Chrome), however on mobile browsers (iOS, Safari and Chrome) the Authorization header is not set.
I am using Axios (0.23.0).
Here is the Axios code:
// api.js
export const ProtectedAPI = axios.create({
baseURL: `${REACT_APP_API_URL}/`,
});
ProtectedAPI.interceptors.request.use(
(config) => {
const currentUser = JSON.parse(window.localStorage.getItem("current_user"));
config.headers = {
Authorization: "Bearer " + currentUser.accessToken,
};
return config;
},
(error) => {
return Promise.reject(error);
}
);
Here is how it is called in my component:
// myComponent/index.js
const accountRes = await ProtectedAPI.get(
"account/get_account"
);
These are the headers received by the API from mobile browsers:
{
Connection: "upgrade",
Host: "<MY_API_ENDPOINT>",
"X-Real-Ip": "<IP_REMOVED_BY_ME>",
"X-Forwarded-For": "<IP_REMOVED_BY_ME>",
Accept: "*/*",
"Accept-Encoding": "gzip, deflate, br",
"Accept-Language": "en-US,en;q=0.9",
Origin: "<MY_ORIGIN>",
"User-Agent":
"Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/94.0.4606.76 Mobile/15E148 Safari/604.1",
"X-Forwarded-Port": "443",
"X-Forwarded-Proto": "https",
};
These are the headers received by the API from desktop browsers:
{
Connection: "upgrade",
Host: "<MY_API_ENDPOINT>",
"X-Real-Ip": "<IP_REMOVED_BY_ME>",
"X-Forwarded-For": "<IP_REMOVED_BY_ME>",
Accept: "*/*",
"Accept-Encoding": "gzip, deflate, br",
"Accept-Language": "en-US,en;q=0.9",
Authorization:
"Bearer <MY_ACCESS_TOKEN>",
Dnt: "1",
Origin: "<MY_ORIGIN>",
"Sec-Ch-Ua":
'"Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"',
"Sec-Ch-Ua-Mobile": "?0",
"Sec-Ch-Ua-Platform": '"Windows"',
"Sec-Fetch-Dest": "empty",
"Sec-Fetch-Mode": "cors",
"Sec-Fetch-Site": "same-site",
"User-Agent":
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36",
"X-Forwarded-Port": "443",
"X-Forwarded-Proto": "https",
};
As you can see, the desktop browser request includes the Authorization header and token, while the mobile request does not. Is there something different about the way Axios interceptors work on mobile browsers?

axios does not return the full data

axios.get(downloadUrl, Object.assign({}, this.tokens[token_nr].config, {responseType: stream}))
.then((response) => {
console.log("HEADERS", response.headers)
console.log(typeof response.data, "RESPONSE LENGTH", response.data.length)
const decryptedBuffer = encryptionService.decrypt(Buffer.from(response.data), infos);
resolve(decryptedBuffer);
})
This axios request should give the data of a mp3 file. I previously had it via the request package which gives a binary Buffer (using the encoding: null option) and I can use it in the encryptionService.decrypt() function.
In the response.headers I can see it gives the same content-length as it would with the request package. But when I print the length of response.data it's shorter. I tried both ArrayBuffer and stream as my ResponseType. Also leaving the ResponseType option out does not help. What should I do to get the full content.
Some logs: (not all headers)
HEADERS {
'accept-ranges': 'bytes',
'cache-control': 'public',
'content-type': 'audio/mpeg',
'content-length': '14175084',
connection: 'close'
}
string RESPONSE LENGTH 13495410
CONFIG HEADERS {
headers: {
Accept: 'application/json, text/plain, */*',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36',
'cache-control': 'max-age=0',
'accept-language': 'en-US,en;q=0.9,en-US;q=0.8,en;q=0.7',
'accept-charset': 'utf-8,ISO-8859-1;q=0.8,*;q=0.7',
cookie: 'arl=XXXX',
Connection: 'keep-alive',
'Keep-Alive': 'timeout=1500, max=100',
'Content-Type': 'text/plain;charset=UTF-8'
},
}

When creating request try passing following headers Connection, Keep-Alive. Sometimes it close the connection before fully receiving the response
var axioRequest = await axios.create({
baseURL: url,
headers: {
Connection: 'keep-alive',
'Keep-Alive': 'timeout=1500, max=100'
}
});

It was resolved with this answer:
https://disjoint.ca/til/2017/09/20/how-to-download-a-binary-file-using-axios/
I missed the Content-Type header and the {ResponseType: 'arraybuffer'}

Puppeteer fails to post

I am trying to intercept a request, add some headers, change the method to post and pass some postData but seems to fail with the method that still being GET, also postData is undefined.
There is my code:
await page.setRequestInterception(true);
page.on('request', interceptedRequest => {
var overrides;
if (interceptedRequest.url() === 'https://www.example.com/') {
console.dir(querystring.stringify(query));
let headers = interceptedRequest.headers();
headers['host'] = 'example.com/';
headers['origin'] = 'https://www.example.com/';
headers['referer'] = 'https://www.example.com/test';
headers['x-requested-with'] = 'XMLHttpRequest';
headers['accept'] = 'application/json, text/javascript, */*; q=0.01';
headers['accept-encoding'] = 'gzip, deflate, br';
headers['content-type'] = 'application/json; charset=UTF-8';
overrides = {
'method': 'POST',
'postData': querystring.stringify(query),
'headers': headers
};
}
interceptedRequest.continue(overrides);
});
Then if I intercept the response:
...
_resourceType: 'document',
_method: 'GET',
_postData: undefined,
_headers:
{ 'upgrade-insecure-requests': '1',
'user-agent':
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3582.0 Safari/537.36',
host: 'example.com',
origin: 'https://www.example.com/',
referer: 'https://www.example.com/test',
'x-requested-with': 'XMLHttpRequest',
accept: 'application/json, text/javascript, */*; q=0.01',
'accept-encoding': 'gzip, deflate, br',
'content-type': 'application/json; charset=UTF-8' }
...
Thanks

Client side(Jquery&Angular) can't send request with x-access-token headers

I followed this article build a web api with token in Node.js:
var token = req.body.token || req.query.token || req.headers['x-access-token'];
if (token) {console.log("passed!");}
else
{console.log("No token provided.");}
I tested with Postman and tried with http://localhost:3000?token=eyJ0eXAiO
all work fine, but when call API in client side:
app.controller('myCtrl', function($scope, $http, $cookies) {
var apikey=$cookies.get('apikey');
$http({url: 'http://localhost:3000/', method: 'GET', headers: {'x-access-token': apikey}})
.success(function (data) {
console.log(data);
}).error(function(error){console.log(error);});
and jquery call:
jQuery.ajax( {
url: 'http://localhost:3000/',
type: 'GET',
beforeSend : function( xhr ) {
xhr.setRequestHeader( 'x-access-token', 'eyJ0eXAi');
},
success: function( response ) {
console.log(response);
},
error : function(error) {
console.log(error);
}
} );
What every Angular or jquery did not work and return "No token provided."
what did I miss? Please help me.
Here is headers from req.headers
Angular.JS
{ host: 'localhost:3000',
connection: 'keep-alive',
'cache-control': 'max-age=0',
'access-control-request-method': 'GET',
origin: 'localhost:3001',
'user-agent': 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/43.0.2357.132 Safari/537.36',
'access-control-request-headers': 'accept, max-age, x-access-token',
accept: '/',
referer: 'localhost:3001',
'accept-encoding': 'gzip, deflate, sdch',
'accept-language': 'en-CA,en;q=0.8,en-US;q=0.6,zh-CN;q=0.4,zh;q=0.2,zh-TW;q=0.
2' }
No token provided.
Postman
{ host: 'localhost:3000',
connection: 'keep-alive',
csp: 'active',
'cache-control': 'no-cache',
'x-access-token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoibGF3cmVuY2
UiLCJwYXNzd29yZCI6InNreTIwMDAiLCJhZG1pbiI6dHJ1ZSwiaWF0IjoxNDM2Mzc0NTYzLCJleHAiOj
E0MzY0NjA5NjN9.OycP6xdUlG3vLyZHcj4rLjyYKE1GnlWc3h-f0r1ZpZ0',
'user-agent': 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/43.0.2357.132 Safari/537.36',
'postman-token': 'ab2a26e3-f6a1-09e0-c21a-85e3cef0aff5',
accept: '/',
'accept-encoding': 'gzip, deflate, sdch',
'accept-language': 'en-CA,en;q=0.8,en-US;q=0.6,zh-CN;q=0.4,zh;q=0.2,zh-TW;q=0.
2' }
passed!

It turned out this is a Chrome issue, have to run Chrome with --disable-web-security then the headers request works.
CORS, Cordova, AngularJs $http and file:// confusion

How to connect to a proxy server and make an http.request via the proxy using nodejs?

I'm not trying to make my server proxy anything i want to connect to a proxy and send http requests via that.
example:
proxy.connect(someip:someport,function(){
console.log('[PM]['+this._account+'] Logging in..');
var auth_re = /auth\.chatango\.com ?= ?([^;]*)/;
var data = querystring.stringify({user_id: this._account, password: this._password, storecookie: 'on', checkerrors: 'yes'});
var options = {hostname: 'chatango.com', port: 80, path: '/login', method: 'POST', headers: {'Connection': 'keep-alive', 'Content-Length': data.length, 'Cache-Control': 'max-age=0', 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8', 'Origin': 'http://chatango.com', 'User-Agent': 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36', 'Content-Type': 'application/x-www-form-urlencoded', 'Referer': 'http://chatango.com/login', 'Accept-Encoding': 'gzip,deflate', 'Accept-Language': 'en-US,en;q=0.8'}};
var self = this;
var req = http.request(options, function(res) {
res.setEncoding('utf8');
if (res.headers['set-cookie'][2]) {
var m = auth_re.exec(res.headers['set-cookie'][2]);
if (m) return callback(m[1]);
}
callback(false);
}).on('error', function(e) {
callback(false);
});
req.write(data);
req.end();
});
i dont know if it will look exactly like that but i'm tired of seeing answers for creating proxy
i just want to connect to one not create one
http proxy because the login page uses an http request

and i found my answer
console.log('[PM]['+this._account+'] Logging in..');
var auth_re = /auth\.chatango\.com ?= ?([^;]*)/;
var data = querystring.stringify({user_id: this._account, password: this._password, storecookie: 'on', checkerrors: 'yes'});
var options = {hostname: 'chatango.com', port: 80, path: '/login', method: 'POST', headers: {'Connection': 'keep-alive', 'Content-Length': data.length, 'Cache-Control': 'max-age=0', 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8', 'Origin': 'http://chatango.com', 'User-Agent': 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36', 'Content-Type': 'application/x-www-form-urlencoded', 'Referer': 'http://chatango.com/login', 'Accept-Encoding': 'gzip,deflate', 'Accept-Language': 'en-US,en;q=0.8'}};
var self = this;
if(self.proxy.url && self.proxy.port){
globaltunnel.initialize({
host: self.proxy.url,
port: self.proxy.port,
tunnel: 'neither',
protocol: 'http'
});
}
var req = http.request(options, function(res) {
res.setEncoding('utf8');
if (res.headers['set-cookie'][2]) {
var m = auth_re.exec(res.headers['set-cookie'][2]);
if (m) return callback(m[1]);
}
callback(false);
}).on('error', function(e) {
console.log(e);
callback(false);
});
req.write(data);
req.end();
if(self.proxy.url && self.proxy.port){
globaltunnel.end();
}