Refused to set 'user-agent'

This isn’t technically an issue with this library, however it should be noted that neither Chrome nor Safari currently allow setting the “user-agent” header, both throw Refused to set unsafe header "user-agent" errors.

It might be responsible to detect whether or not the browser allows for setting this header to avoid spurious errors getting thrown.

I’m happy to open a PR if there’s a chance it will go in. We’d certainly like that, as currently we’re getting this error on every page load.

[jverhoelen]

In Chrome for example the annoying issue of logging the errors Refused to set unsafe header "user-agent" and Refused to set unsafe header "Accept-Encoding" still persists. Both headers are present in the list of automatically set headers but xhr.js adapter is not filtering them out.

I think the block in xhr.js handling this should look like this:

// Add headers to the request
if ('setRequestHeader' in request) {
  utils.forEach(requestHeaders, function setRequestHeader(val, key) {
    if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
      // Remove Content-Type if data is undefined
      delete requestHeaders[key];
    } else if (key.toLowerCase() === 'user-agent' || key.toLowerCase() === 'accept-encoding') {
        // don't do anything
    } else {
      // Otherwise add header to the request
        console.log('axios/lib/adapters/xhr')
      request.setRequestHeader(key, val);
    }
  });
}

Is there any reason against solving it like this which should be considered?

[MarkPieszak]

In Chrome for example the annoying issue of logging the errors Refused to set unsafe header "user-agent" and Refused to set unsafe header "Accept-Encoding" still persists. Both headers are present in the list of automatically set headers but xhr.js adapter is not filtering them out.

I think the block in xhr.js handling this should look like this:

// Add headers to the request
if ('setRequestHeader' in request) {
  utils.forEach(requestHeaders, function setRequestHeader(val, key) {
    if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
      // Remove Content-Type if data is undefined
      delete requestHeaders[key];
    } else if (key.toLowerCase() === 'user-agent' || key.toLowerCase() === 'accept-encoding') {
        // don't do anything
    } else {
      // Otherwise add header to the request
        console.log('axios/lib/adapters/xhr')
      request.setRequestHeader(key, val);
    }
  });
}

Is there any reason against solving it like this which should be considered?

I have ran into this exact issue as well (not using Axios directly, but something else in an Application is). A fix like above does infact make it go away, but that’s only temporarily + locally (aside from writing scripts to update this after “install” 😄)

If it’s as simple as getting a PR in to fix this, I’d be more than happy to help! (Unless there’s a good reason we can’t do this?)