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


相关文章
|
存储 缓存 API
电商行业中 API 接口的常见问题和解决方法
本文探讨了电商行业中API接口的常见问题及解决方法。涵盖数据准确性(如数据不一致、数据缺失)、性能问题(如响应时间过长、吞吐量不足)、安全问题(如身份认证与授权、数据泄露风险)和兼容性问题(如接口版本兼容性、系统兼容性)。通过优化数据同步机制、缓存策略、网络配置、服务器负载均衡、代码逻辑,以及采用安全的身份认证方式和加密技术,结合实际代码示例,帮助开发者提升API接口的稳定性和安全性,确保电商业务顺利运行。
796 11
|
算法 API 网络安全
京东 API 接口调用失败的常见原因及解决方法
京东API为电商开发提供了丰富的功能,如商品信息获取、订单管理和物流查询等。然而,实际开发中常遇接口调用失败的问题。本文深入探讨了常见原因及解决方法,包括网络问题(如不稳定连接和防火墙限制)、权限问题(如密钥无效和接口权限不足)、参数问题(如缺失或格式不匹配)及服务器端问题(如维护和版本不兼容),并附带代码示例,帮助开发者快速定位和解决问题,提升应用的稳定性和可靠性。
3982 5
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
554 84
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
543 1
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
JavaScript API
vue中api统一管理
【10月更文挑战第4天】
|
缓存 监控 安全
电商行业中 API 接口的常见问题和解决方法?
电商行业中 API 接口面临的常见问题包括安全性问题、性能问题、兼容性问题、可靠性问题和可维护性问题。针对这些问题,可以采取相应的解决方法,如采用加密技术、优化数据库查询、制定统一的接口规范、进行容错处理、采用良好的代码结构等。
662 1
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
689 4
|
JavaScript 前端开发 API
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
371 0