Using GeoJSON in Openlayers 4 and Geoserver

First time trying to draw an Openlayers map with GeoJSON instead of WMS, and not having much luck. My layer is hosted in Geoserver and is named 'sections', in a workspace called 'basic_map'. This is my code so far:

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
    url: 'http://localhost:8082/geoserver/basic_map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=basic_map:sections&maxFeatures=50&outputFormat=application%2Fjson',
    format: new ol.format.GeoJSON(),
    crossOrigin: 'anonymous',

    })
    });

 var mapcentre= ol.proj.transform([157.83430,-33.07209],
'EPSG:4326', 'EPSG:3857');

  var map = new ol.Map({
    layers: [

      vectorLayer

    ],
    target: 'map',
    view: new ol.View({
      center: mapcentre,
      zoom: 14
    })
  });

The URL link is just copied from the layer preview, which I'm not sure on as some examples use wfs instead.

The developer console also shows an error saying 'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8082/geoserver/basic_map/ows?.........'

Answer

Check this out: http://suite.opengeo.org/docs/latest/sysadmin/cors/index.html

You need to either enable JSONP for GeoServer, or set up cross origin resource sharing.

It's about the same complexity to do both, so I suggest setting up CORS.