Reprojecting geojson on a vector layer

Question

The vector data displays, but its down near null island, I have been trying this for a couple hours now and nothing I try has worked. Can you see why this code refuses to place the data on the right location?

Source is data EPSG:27700 var proj is EPSG:3857 I have swapped dataProjection & featureProjection which has zero effect.

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    loader: function(extent, resolution, projection) {
        var proj = projection.getCode();
        console.log(proj);
        var url = "site.com?typeName=my:layer=WFS&version=1.0.0&request=GetFeature&outputFormat=application%2Fjson&bbox=" + extent.join() + ",EPSG:3857"
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        var onError = function() {
            vectorSource.removeLoadedExtent(extent);
        }
        xhr.onerror = onError;
        xhr.onload = function() {
            if (xhr.status == 200) {
                vectorSource.addFeatures(
                    vectorSource.getFormat().readFeatures(xhr.responseText,{
                        dataProjection: 'EPSG:27700',
                        featureProjection: 'EPSG:3857'
                    }));
            } else {
                onError();
            }
        }
        xhr.send();
    },
    strategy: ol.loadingstrategy.bbox
});