geoserver Openlayers4 关于wms，jsonp、地图服务、GetFeatureInfo查询服务跨域请求的各种问题_leaflet geoserver getfeatureinfo 跨域-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42248939/article/details/102529741

1、直接上代码不多bb

错误1：

（我的geoserver是挂载在tomcat上的，有些网上设置的跨域是不行的，是因为有的用的geoserver是直接在jett上的，要注意搜索关键字，要说明自己geoserver是通过什么方式访问的。）

地图加载无问题，但是请求json就会出错，配置见下图。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/js/olmap/js/openlayers/css/ol.css}" >
    <script type="text/javascript" src="https://openlayers.org/en/v4.5.0/build/ol.js" th:src="@{/js/olmap/js/openlayers/build/ol.js}" ></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
    <script type='text/javascript' src="/js/plugins/bootstrap/js/bootstrap.min.js" ></script>
    <style>
        #map {
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
    $(function () {
        var bounds = [89.1716461181641, 6.08244466781616,
            135.314254760742, 53.7941207885742];
        var format = 'image/png';
        var view = new ol.View({
            center: ol.proj.fromLonLat([118.32,32.30]),
            zoom: 9
        })
        var WMSsource = new ol.source.ImageWMS({
            ratio: 1,
            url: 'http://localhost:8080/geoserver/map/wms',
            params: {
                'FORMAT': format,
                'VERSION': '1.1.1',
                "LAYERS": 'map:9.行政区划分布图',
                "exceptions": 'application/vnd.ogc.se_xml',
            }
        });
        var WMSLayer = new ol.layer.Image({
            source: WMSsource
        });
        var map = new ol.Map({
            target: "map",
            layers: [WMSLayer],
            view: view
        });
        map.on("click", function (evt) {

            var viewResolution = view.getResolution();
            var urls = WMSsource.getGetFeatu