Demo fixing issues in https://gis.stackexchange.com/questions/267468/wfs-not-working-in-openlayers-working-in-qgis-wms-working-ok by ThomasG77

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>WFS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var vectorSource = new ol.source.Vector({
        format: new ol.format.WFS(), // Fix your wrong `new ol.format.WFS({gmlFormat: new ol.format.GML({srsName: 'Nothing'})})
        loader: function(extent, resolution, projection) {
          // Changed the url to use WFS 1.1.0 in order to use GML 3.1.1 (if you use WFS 1.0.0, GML version 2.1.2 and I had some issues)
          var url = 'https://mrdata.usgs.gov/cgi-bin/mapserv?map=/mnt/mrt/map-files/ca.map&service=wfs&version=1.1.0&request=getfeature&TYPENAME=lith-low&maxfeatures=10';
          // Use fetch, more simple & modern instead of XMLHttpRequest
          fetch(url).then(function(response) {
            return response.text();
          }).then(function(text) {
            // Reproject feature (EPSG 4326) to map projection e.g EPSG:3857
            var features = vectorSource.getFormat().readFeatures(text, {
              dataProjection: 'EPSG:4326',
              featureProjection: 'EPSG:3857'
            });
            // Add parsed features to vectorSource
            vectorSource.addFeatures(features);
          }).catch(function(error) {
            console.log(error.message);
          })
        }
      });

      var vector = new ol.layer.Vector({
        source: vectorSource,
        // Changed style to fill, yours using ol.style.Stroke with color: null would not work
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'red'
          })
        })
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var map = new ol.Map({
         layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [-13000233,3901982],
          maxZoom: 19,
          zoom: 6
        })
      });
    </script>
  </body>
</html>