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.