Openlayers+vue调用GeoServer的api报跨域错误解决方法

简介: Openlayers+vue调用GeoServer的api报跨域错误解决方法

Openlayers+vue调用GeoServer:has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested

geoserver安装目录下\webapps\geoserver\WEB-INF\web.xml

取消 以下注释

<!-- Uncomment following filter to enable CORS in Jetty. Do not forget the second config block further down.-->
    <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
      <init-param>
        <param-name>chainPreflight</param-name>
        <param-value>false</param-value>
      </init-param>
      <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>allowedMethods</param-name>
        <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>allowedHeaders</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>
<!-- Uncomment following filter to enable CORS-->
    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

重启geoserver


相关文章
|
2月前
|
存储 缓存 API
电商行业中 API 接口的常见问题和解决方法
本文探讨了电商行业中API接口的常见问题及解决方法。涵盖数据准确性(如数据不一致、数据缺失)、性能问题(如响应时间过长、吞吐量不足)、安全问题(如身份认证与授权、数据泄露风险)和兼容性问题(如接口版本兼容性、系统兼容性)。通过优化数据同步机制、缓存策略、网络配置、服务器负载均衡、代码逻辑,以及采用安全的身份认证方式和加密技术,结合实际代码示例,帮助开发者提升API接口的稳定性和安全性,确保电商业务顺利运行。
109 11
|
5月前
|
JavaScript API
vue中api统一管理
【10月更文挑战第4天】
|
2月前
|
算法 API 网络安全
京东 API 接口调用失败的常见原因及解决方法
京东API为电商开发提供了丰富的功能,如商品信息获取、订单管理和物流查询等。然而,实际开发中常遇接口调用失败的问题。本文深入探讨了常见原因及解决方法,包括网络问题(如不稳定连接和防火墙限制)、权限问题(如密钥无效和接口权限不足)、参数问题(如缺失或格式不匹配)及服务器端问题(如维护和版本不兼容),并附带代码示例,帮助开发者快速定位和解决问题,提升应用的稳定性和可靠性。
201 5
|
7月前
|
前端开发 JavaScript 安全
入门Vue+.NET 8 Web Api记录(一)
入门Vue+.NET 8 Web Api记录(一)
232 4
|
4月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
4月前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
|
4月前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
|
5月前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
6月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
87 4
|
5月前
|
缓存 监控 安全
电商行业中 API 接口的常见问题和解决方法?
电商行业中 API 接口面临的常见问题包括安全性问题、性能问题、兼容性问题、可靠性问题和可维护性问题。针对这些问题,可以采取相应的解决方法,如采用加密技术、优化数据库查询、制定统一的接口规范、进行容错处理、采用良好的代码结构等。
235 0

热门文章

最新文章