I am using openlayers 3 to try and get vector data from my Geoserver 2.12.0. I am using ol.layer.vectorTile and ol.source.VectorTile to build my vector layer. The main goal is to pull polygon vector data from geoserver so the client can edit/save the polygon. I am using this as a reference to pull the Vector Tile data. I have completed everything on the tutorial except the "Create OpenLayers application" section. This is my openlayer's javascript:

var longitude = -97.587453;
var latitude = 35.471398;
var zoom = 11;
var format = 'application/x-protobuf;type=mapbox-vector';
var layer = 'test:poly';
var projection_epsg_no = '4326';

var layers = [
    new ol.layer.Tile({
        source: new ol.source.OSM()
new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            tilePixelRatio: 1,
            tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
            format: new ol.format.MVT(),
            url: '' + layer + '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
var projection = "EPSG:4326";
var latLong = ol.proj.fromLonLat([longitude, latitude]);

var myControl = new ol.control.Control({target: $('#map-panel')});

var controls = [ol.control.Zoom, myControl];

var map = new ol.Map({
    layers: layers,
    target: 'map',
    control: controls,
    view: new ol.View({
        center: latLong,
        zoom: zoom

This is the error I get from Chrome's Developer Tool Console:

Failed to load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

If I change the url to:

url: '/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'

I get the following error:

GET 404 (Not Found)

How do I pull in vector data from my geoserver using Openlayer's VectorTiles?

  • Do you have CORS access on?
    – Ian Turton
    Oct 21, 2017 at 11:26
  • 1
    The origin is different from Check other question How to enable CORS in Tomcat
    – jgrocha
    Oct 21, 2017 at 14:50
  • @jgrocha put that as the answer and I will give you credit.
    – user908759
    Oct 25, 2017 at 3:45

1 Answer 1


For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.

A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

In your case, you requested a document from which is considered different from (because you are using a different port).

To solve this problem, the easiest solution is to enable CORS in Tomcat.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.