How to get WFS from Geoserver localhost:8080 to OpenLayers localhost:1234 - vector

Question

I am trying to get the map of contiguous US that appears as a pre-installed topp:states layer in my local laptop installation of Geoserver 2.19.1. I want it to appear as a vector layer on a localhost port. I actually started with the openlayers example at https://openlayers.org/en/latest/examples/vector-wfs.html, and got that example to work nicely, appearing as it should at http://localhost:1234, but for other layers, taken from external websites. With some effort I found the needed modifications that I expected to work for the Geoserver topp:states layer obtained from localhost:8080, but I just couldn't seem to make it appear at localhost:1234
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Stroke, Style} from 'ol/style';
import {Vector as VectorLayer} from 'ol/layer';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
var vectorSource = new VectorSource({
format: new GeoJSON(),
url: 'http://localhost:8080/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=topp:states&'+
'outputFormat=application/json&srsname=EPSG:3857&' +
'bbox=24.9,-124.8,49.5,-66.0',
});
var vector = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
color: 'rgba(0, 0, 0, 1.0)',
width: 2,
}),
}),
});
var map = new Map({
layers: [vector],
target: document.getElementById('map'),
view: new View({
center: [-10000000,4500000.0],
zoom: 4,
}),
});
Any help would be much appreciated.