Cannot access GeoServer WMS

Question

I am trying to connect a WMS layer from GeoServer with OpenLayers 3 like below, however, my JavaScript file does not show my WMS layer.

My Chrome says it failed to load response data (WMS). My source is redirected to below URL. This URL works on my server, but not through the JavaScript source.

http://localhost:8080/geoserver/Mars/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&layers=Mars%3AMercury_basemap&tiled=true&format=application%2Fopenlayers&srs=EPSG%3A4326&transparent=true&WIDTH=512&HEIGHT=512&CRS=EPSG%3A3857&STYLES=&FORMAT_OPTIONS=dpi%3A180&BBOX=-15028131.257091932%2C5009377.085697312%2C-12523442.714243276%2C7514065.628545968

Can someone please help?

It seems like the problem is caused from security settings in GeoServer and I tried to create roles to getread() as well. (http://docs.geoserver.org/stable/en/user/security/service.html)

var layers = [
 new ol.layer.Tile({
 extent: [-13884991, 2870341, -7455066, 6338219],
 source: new ol.source.TileWMS({
  url: "http://localhost:8080/geoserver/Mars/wms",
  params: {'layers': 'Mars:Mercury_basemap', 'tiled': true, 'format': 'application/openlayers', 'srs': 'EPSG:4326', 'transparent': true},
  serverType: 'geoserver'
 }))
 })
];

var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View({
   center: [-10997148, 4569099],
   zoom: 4
  })
});

Answer 1

You are asking geoserver to return a javascript application rather than the image that openlayers is expecting.

Remove the format parameter and the srs and tiled ones too.

Answer 2

localhost is the machine running the code, so it would work only if ran on the server itself. You would need to set the URL to your server URL instead

change

url: "http://localhost:8080/geoserver/Mars/wms",

to something like

 url: "http://www.myDomain.Com:8080/geoserver/Mars/wms",

or

 url: "http://192.168.1.1:8080/geoserver/Mars/wms",