Ok, if you're getting the 'No 'Access-Control-Allow-Origin' header is present' you have two options:
- Enable CORS
- Enable JSONP.
Personally, I'd enable both.
JSONP can be enabled with an environment variable, by the way, which makes it nice and easy. On Linux you can do this:
export ENABLE_JSONP=true
And then start Tomcat.
For enabling CORS using Tomcat, I use this snippet:
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
That goes in your web.xml file, which is located at $CATALINA_HOME/webapps/geoserver/WEB-INF/web.xml. Note that also in this file is a commented out section that can enable JSONP:
<!--
<context-param>
<param-name>ENABLE_JSONP</param-name>
<param-value>true</param-value>
</context-param>
-->
Uncomment that and you've got some JSONP format available as a WFS request.
If you have a reverse proxy, you can set up CORS there, just look at the docs.
FYI, the difference between JSON and JSONP is that JSONP is wrapped in a function, which for some reason is interpreted differently than regular JSON.
Here's an example loading a dataset into Leaflet using JSONP: https://github.com/alexgleith/maps-website/blob/master/glenorchy_mtbp.html