geoserver - 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:

    cross-origin
    org.eclipse.jetty.servlets.CrossOriginFilter
    
        allowedOrigins
        *
    

    
        allowedMethods
        *
    
    
        allowedHeaders
        *
    



    cross-origin
    /*

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:

https://www.youtube.com/watch?v=YEOA8WWWVCw

After you complete the install, you then enable CORS:

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