Is there a way to change the query string of JavaScript-induced requests? I want to add "&myParam=myValue" to any request sent by my HTML/JS application.
3 Answers
I don't think there's anything built in that lets you do that.
In my apps, I always have a central function XHR goes through so I have a single point to do things like this. If you don't have that or need to intercept calls from 3rd party libs:
You could wrap XMLHttpRequest.open to handle the XHR ones:
var originalOpen = XMLHttpRequest.open;
XMLHttpRequest.open = function() {
var args = Array.prototype.slice.call(arguments);
args[0] += (args[0].indexOf("?") == -1 ? "?" : "&") + "myParam=" + encodeURIComponent("myValue");
return originalOpen.apply(this, args);
};
...and then similar for fetch. But it seems brittle.
Alternately, you might look at using a cookie for the parameter, as the browser will add the cookie to the requests. (That assumes the requests are going to an origina you can add cookies for in your code.)
3 Comments
D.R.
Your solution worked for my page. Do you know by chance, if there is a way to wrap XMLHttpRequest from an included IFRAME as well? It looks like the Same-Origin-Policy prevents me from doing this - is there a way around it?
T.J. Crowder
@D.R.: If the iframe is served from a different origin, the SOP does indeed prevent your script from accessing its JavaScript environment. So you can't wrap
XMLHttpRequest.open in it.D.R.
Ok, too bad...no solution then. Still accepting your answer, as it answers the posted question.
You could use partial application to lock in defaults when you declare your fetch function and essentially decorate the standard call that will merge your defaults and the passed params.
const fetchFactory = defaults => (url, data) => {
// make a copy of the defaults
const params = Object.assign({}, defaults)
// assign the passed in data with the defaults
params.body = JSON.stringify(Object.assign(params.body, data))
// call fetch with the params
return fetch(url, params)
}
// create a default for POST using the factory
const postFetch = fetchFactory({
method: 'post',
headers: {
'x-requested-with': 'fetch',
'Authorization': 'basic:' + btoa('a secret')
},
body: {
myParam: 'value'
}
})
// now you can call your function
postFetch('http://somewhere.com', {
one: 1,
two: 2
})
.then(respone => response.json())
Comments
It seems to me that you are asking how to set/edit URL parameters in http requests. Something quite similar has been asked here: here
If you are using XMLHttpRequest then the accepted answer in the link should work perfectly. The two key things the note are
- the url parameters are simply a javascript object that you convert into a JSON string. This happens through JSON.stringify({ myParam: 'hi'});
- the question/answer linked are making post requests but you may not want to make that request as well, I suggest doing some research about which HTTP request method you want - https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
XMLHttpRequestandfetchand such?