Change query string parametesr of JavaScript requests

Question

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.

By "JavaScript-induced," do you mean `XMLHttpRequest` and `fetch` and such? — T.J. Crowder, Oct 02 '16 at 09:16

score 1 · Accepted Answer · answered Oct 02 '16 at 09:25

1

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.)

answered Oct 02 '16 at 09:25

T.J. Crowder

1,031,962
187
1,923
1,875

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? – D.R. Oct 02 '16 at 10:09
@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. – T.J. Crowder Oct 02 '16 at 11:23
Ok, too bad...no solution then. Still accepting your answer, as it answers the posted question. – D.R. Oct 02 '16 at 11:25

score 1 · Answer 2 · answered Oct 02 '16 at 09:44

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())

score -1 · Answer 3 · edited May 23 '17 at 10:27

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

Change query string parametesr of JavaScript requests

3 Answers3