CORS issue with OpenLayers3 getGetFeatureInfoUrl

Question

In an Angular directive I'm trying to create an Information tool with OpenLayers 3 using the getGetFeatureInfoUrl method. I've set up a function which is using $http to return the info as JSON:

 //GetFeatureInfo
        scope.getinfo = function() {
            var wmsSource = new ol.source.TileWMS({
              url: 'http://xxxxxx.com:8080/geoserver/yyyy/wms',
              params: {'LAYERS': 'zzzzz'},
              serverType: 'geoserver'
            });

            var wmsLayer = new ol.layer.Tile({
              source: wmsSource
            });

            map.on('singleclick', function(evt) {
              //document.getElementById('info').innerHTML = '';
              var viewResolution = /** @type {number} */ (view.getResolution());
              var url = wmsSource.getGetFeatureInfoUrl(
                  evt.coordinate, viewResolution, 'EPSG:3857',
                  {'INFO_FORMAT': 'application/json',
                    'propertyName': 'formal_en'});
              if (url) {
                  console.log('here');

                  var parser = new ol.format.GeoJSON();
                    $http({
                    url: url,
                    dataType: 'jsonp',
                    jsonpCallback: 'parseResponse'
                    }).then(function(response) {

                    var result = parser.readFeatures(response);
                    if (result.length) {
                        var info =[];
                        for (var i = 0, ii = result.length; i < ii; ++i) {
                            info.push(result[i].get('formal_en'));
                            }

                            console.log(info);

                         } else {
                             console.log('info else');
                    }
                  });
              } //
            });
        };

This is the error code from Console: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://xxxxxx.com:8080/geoserver/yyyy/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=zzzzz&LAYERS=zzzzz&INFO_FORMAT=application%2Fjsonp&propertyName=formal_en&I=34&J=135&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=-95393.41129989922%2C6826743.870205661%2C-94170.4188473364%2C6827966.862658224. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

from what I understand I have to add a filter. I have tried adding this to end of C:\Program Files (x86)\GeoServer 2.9.0\webapps\geoserver\WEB-INF\web.xml

<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>cross-origin</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

... and then restarting GeoServer but then GeoServer stopped working. Is this the correct way to fix the issue and if so am I editing web.xml correctly? Can anyone help please?