Geoserver VectorTile Error

Question

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({
        style:defaultFeature,
        source: new ol.source.VectorTile({
            tilePixelRatio: 1,
            tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
            format: new ol.format.MVT(),
            url: 'http://192.168.10.15:8080/geoserver/gwc/service/tms/1.0.0/' + 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 http://192.168.10.15:8080/geoserver/gwc/service/tms/1.0.0/test:poly@EPSG%3A4326@pbf/11/472/1228.pbf: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.10.15' 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 http://192.168.10.15/geoserver/gwc/service/tms/1.0.0/test:poly@EPSG%3A4326@pbf/11/472/1228.pbf 404 (Not Found)

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

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 http://192.168.10.15 which is considered different from http://192.168.10.15:8080 (because you are using a different port).

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