# OpenLayers 3: Cross-Origin Request Blocked: The Same Origin Policy disallows

Using OpenLayers 3, I cannot get this message to go away:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myserver:8085/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf:view1&maxFeatures=1&outputFormat=JSON. This can be fixed by moving the resource to the same domain or enabling CORS.


This is the code:

// Ol3 only supports Projections "EPSG:4326" and "EPSG:3857". For every other projection you need proj4js
proj4.defs("EPSG:2236", "+proj=tmerc +lat_0=24.33333333333333 +lon_0=-81 +k=0.999941177 +x_0=200000.0001016002 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=us-ft +no_defs");

// Leases Layer
var myLayer = new ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:2236',
url: 'http://myserver:8085/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf:view1&maxFeatures=1&outputFormat=JSON',
crossOrigin: null
})
});

// View
var view = new ol.View({
projection: 'EPSG:2236',
center: [0, 0],
zoom: 4
});

// Map
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [myLayer],
view: view
});


I have tried setting the crossOrigin setting to:

crossOrigin: null
crossOrigin: 'null'
crossOrigin: 'anonymous'


I only see the zoom in/out control but the layer is not rendered.

I went with simon's option 3 below. I enabled CORS in GeoServer by copying the necessary jetty-servlets jar files and enabling it in the \WEB-INF\web.xml:

<filter>
<filter-name>cross-origin</filter-name>
<filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
<init-param>
<param-name>allowedOrigins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>allowedMethods</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-value>*</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>cross-origin</filter-name>
<filter-pattern>/*</filter-pattern>
</filter-mapping>


After I did that, I tested the page again and receive the same error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myserver:8085/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf:view1&maxFeatures=1&outputFormat=JSON. This can be fixed by moving the resource to the same domain or enabling CORS.


Looks like I am still missing something. Do I have to do anything from the OpenLayers Side?

I ended up getting rid of Jetty and uninstalling GeoServer completely. The problem is when you install the geoserver windows installer, it installs a version of jetty that is 4 years old! (Jetty version 6.1.8) Even though I had copied the jar files for CORS, it is only supported in Jetty 7+.

I found out that you can install a WAR file. I decided to use Tomcat since that is what GeoServer is mostly tested on according to this note from the GeoServer website:

Note GeoServer has been mostly tested using Tomcat, and therefore these instructions may not work with other container applications.

These are the instructions for installing the WAR file:

http://docs.geoserver.org/stable/en/user/installation/war.html

This is a nice how-to video also:

After you complete the install, you then enable CORS:

http://enable-cors.org/server_tomcat.html

• i can't test it, the adress you provided doesn't work. – Simon Zyx Sep 14 '14 at 7:52
• Unfortunately, its all in the intranet. My two servers (geoserver and OL server) are both on the intranet. – user3657279 Sep 15 '14 at 12:05
• I successfully taken the "Update #2" path described above. If you plan to do the same, keep in mind that the web.xml file is located under the newly deployed GeoServer folder, e.g.: \xampp\tomcat\webapps\geoserver\WEB-INF\web.xml – Lauden Oct 13 '15 at 12:57

There is an easy way workaround using JSONP instead :

1. You need to enable JSONP in the geoserver. To enable JSONP, you need to add following in your web.xml ( e.g. C:\Program Files (x86)\GeoServer 2.4.4\webapps\geoserver\WEB-INF\web.xml)

... ENABLE_JSONP true ... 2. Restart your geoserver. Now for GetFeatureInfo request, geoserver will send parseResponse(JSON data ) to the client

1. How JSONP works from the client (JavaScript)? JSONP call is simple. You need to add a script with src = url (the url is GetFeatureInfo url) into header

var tag = document.createElement("script"); tag.src = url; document.getElementsByTagName("head")[0].appendChild(tag);

Once script is appended it will call jsonp from the server. invoking parseRespose function. So you need to define a parseResponse function as follows. The scope of this function should be global.

function parseResponse(data) { var feature = data.features[0]; console.log(feature);
};

• this is an old post but I felt in the same problem, I managed to work around it with JSONP but its useful only to get features from Geoserver however if you intend to use WFS-T then you're stuck, I wrote some php scripts for CRUD operations as a plan B and still searching for a way to enable CORS in geoserver 2.9 – Hicham Zouarhi Jun 30 '16 at 15:08

I faced the same problem myself and i tried many solutions that discussed here or in other forums and finally i managed to solve the problem of enabling the Cross Origin in Geoserver.

After many trials i discovered that the solution is pretty simple following the exact steps that found in the Jetty webpage Jetty Cross Origin Filter.

But with a small change, the page said that we have to copy the following Cross-Origin filter to the (Web.xml) configuration file, but the solution that worked with me is copying this filter xml configuration in to (webdefault.xml) configuration file, when applying this change the geoserver worked like a charm and i could run any WFS, WMS GetFeatureInfoRequest in JSON format using AJAX instead of using IFrame soultion.

I'm using the following software versions:

• Boundless OpenGeo v4.5 .
• Geoserver v 2.6.2 .
• Jetty v 7.6.13.v20130916 .

Here is the detailed steps:

2. In this example i'm using jetty v7.6.13.v20130916 so the jar file should be named
(jetty-servlets-7.6.13.v20130916.jar) the filename will be different according to the jetty version - don't change its name because jetty matching the servlet name with its version like :
jetty-servlets-<%JETTY_VERSION%>.jar, so don't rename it.
3. Stop the (GeoServer, Postgres) services and Take a copy from the OpenGeo directory located in
(C:\Program Files (x86)\boundless\OpenGeo) and also Copy the OpenGeo directory located in
(C:\ProgramData\boundless\OpenGeo) before starting this tutorial, as a precaution step.

4. Copy the file (jetty-servlets-7.6.13.v20130916.jar) (As-is) into the jetty Lib directory
(*C:\Program Files (x86)\boundless\OpenGeo\jetty\lib*) also the directory may change according your installation directory.

5. Copy and paste the following xml lines into the (webdefault.xml) located in
(C:\Program Files (x86)\boundless\OpenGeo\jetty\ect\webdefault.xml), i'm not sure that the location for these lines to place in the file is important or not but i paste them starting from line #306 after </serlet-mapping>.
<filter>
<filter-name>cross-origin</filter-name>
<filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cross-origin</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

1. Start the (GeoServer, Postgres) services, wait for a few seconds and browse to the geoserver page, the geoserver will start correctly.

This tutorial worked for me and i hope it work for anyone facing the same problem.

• This is the third question to which you have posted the same answer. Would you be able to review each of your three answers to decide whether they really are answering the question being asked or are just generic advice, please? – PolyGeo Apr 16 '15 at 8:56
• I'm just didn't knew that how to referee to my other answer, so i copied it here again – Ahmed GIS Apr 16 '15 at 10:09
• at the begging i was looking for a solution for the Cross-Origin problem with Geoserver and Openlayers, after i figure out a solution i wanted to share it with other peoples which face to the same problem, so i searched here for these keywords (CORS, Openlayers, Geoserver) and i answered the same questions to my problem but i didn't knew how to referee to my other answer, so i copied it here again. I don't mean to repeat my answer, i wanted to help other like this amazing site helped me in other problems. – Ahmed GIS Apr 16 '15 at 10:19
• I have no access to the source layer's geoserver and don't know what the server's owner have done. – Magno C Jun 22 '16 at 18:57
• @MagnoC You have to check with the server's owner first maybe he changed the layers name or something else. – Ahmed GIS Jun 24 '16 at 14:14

The crossOrigin-setting does only (?) exist for ol.source.TileImage. (http://openlayers.org/en/master/apidoc/ol.source.TileImage.html - untick "Stable only" in the upper right corner). ol.source.GeoJSON doesn't have a crossOrigin setting, because you can't access JSON via a cross-site requests.

You have different ways around this:

1. use a web proxy for ajax calls if you don't have access to the server, where the json comes from. (Search for example for ajax proxy)
2. you could use jsonp if you have access to the server. This normally is the prefered solution but i don't know if it does work with geojson and you might have to overwrite the loader function (http://en.wikipedia.org/wiki/JSONP -- How to get JSON from Geoserver using AJAX request -- http://openlayers.org/en/master/examples/vector-osm.js <- an example for using a custom loader function)
3. enable cross-origin requests on the server. (http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
4. if the data is static, download it and put it on your own server (just mentioning for completness)

similar problem, but not geo related: https://stackoverflow.com/questions/5549068/json-how-do-i-make-cross-domain-json-call

• Simon, please see Update #1 above per your suggestion. Thanks. – user3657279 Sep 22 '14 at 13:45

Check the Geoserver response headers in Firebug/Chrome Dev Tools Network tab to see if Acces-Control-Allow-Origin: * header is really there. If not, the problem is on the servlet container side. Or maybe, if the application is internal, set up a proxy on primary webserver rather than enabling CORS? The latter will make more sense if your Geoserver was going to be publicly available.

• I checked the response headers by going to Firebug->"Net" tab then clicked on the "Headers" tab. It shows 3 subsections: Response Headers, Request Headers and Response Headers from Cache. There is no mention of "Access-Control-Allow-Origin". – user3657279 Sep 22 '14 at 14:49
• The Access-Control-Allow-Origin header should reside in Response Headers subsection. If it doesn't, try reconfiguring your servlet container. – Michal Mackiewicz Sep 22 '14 at 18:23

My CORS issue was resolve by http://2carto.com/enable-cors-domain-geoserver-2-8/#comment-53 for GeoServer 2.8. (unuseful for GeoServer 2.9)

• Links can disappear over time. Please edit your answer to include the steps you followed to keep this answer relevant. – Midavalo Jul 3 '16 at 0:50
• Link is already gone... – ardila Apr 19 '18 at 14:25