Layer displaying correctly with OpenLayers and GeoServer as WMS but giving CORS error when trying to display the same layer as WFS

Question

I have the following map which works perfectly:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import BingMaps from 'ol/source/BingMaps'
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
var baseLayer = new TileLayer({
source: new BingMaps({
 key: 'mykey',
 imagerySet:'AerialWithLabels'}),
});
var map = new Map({
 layers: [baseLayer],
 target: 'map',
 view: new View({
 zoom: 11,
 }),
});

When I add a WMS layer to this map it displays correctly:

var layer = new TileLayer({
 source: new TileWMS({
 url: 'http://myip:8080/geoserver/MYWORKSPACE/wms',
 params: {'LAYERS': 'MYWORKSPACE:MYLAYER', 'TILED': true},
 serverType: 'geoserver',
 }),
});
map.addLayer(layer)

But when I add the same layer but as WFS:

var layer2 = new VectorLayer({
 source: new VectorSource({
 format: new GeoJSON(),
 url: function(extent) {
 return 'http://myip:8080/geoserver/MYWORKSPACE/wfs?' +
 'service=WFS&' +
 'version=1.0.0&request=GetFeature&typename=MYLAYER&'+
 'outputFormat=application/json';
 }
 })
});
map.addLayer(layer2)

It shows nothing and gives me the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myip:8080/geoserver/MYWORKSPACE/wfs?service=W...GetFeature&typename=MYLAYER&outputFormat=application/json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I know I could enable CORS on my server and maybe it would work but I don't understand why displaying the layer as WMS doesn't give me this CORS error.

I wouldn't like to enable CORS on my server because I already tried that last day without success, so If there was a way to show this layer as a WFS without touching the server would be perfect.

Answer 1

WMS is requesting an image so there is no CORS issue. When you request a WFS feature collection the browser is more worried and needs you to handle CORS correctly.

• David1212k: Well then I will have to configure my server, thanks