vue+openlayer调用geoserver时发生了跨域报错

Question

vue+openlayer调用geoserver时发生了跨域报错
我在前端做以下服务器代理配置

页面上是这么使用的

但是报错了

求解

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

该问题是由于前端向不同域名（即不同端口）的服务器发送了请求，导致跨域问题。通常情况下，浏览器为了安全起见会限制跨域请求的操作，因此需要进行相关配置以确保跨域请求能够正常进行。通过设置代理服务器可以解决该问题，以下是具体步骤： 1.在Node.js环境下安装http-proxy-middleware `npm install http-proxy-middleware --save` 2.在vue项目中的config/index.js的dev对象中添加以下代码 `const proxyMiddleware = require('http-proxy-middleware') dev: { proxyTable: {

'/geoserver': {
  target: 'http://localhost:8080/',
  changeOrigin: true,
  pathRewrite: {
    '^/geoserver': '/geoserver'
  }
}

}, ... }其中，'/geoserver'表示请求的接口路径，'http://localhost:8080/'代表需要访问的geoserver地址，changeOrigin: true表示是否改变源头，并pathRewrite：{}表示重写路径，即把'/geoserver'改写成'/geoserver'。 3.在前端代码中请求时，将原来的地址改为代理服务器地址import axios from 'axios' axios.defaults.baseURL = 'http://localhost:8081' // 代理服务器端口号 axios.get('/geoserver/wms').then((response) => { console.log(response) }).catch((error) => { console.log(error) })` 需要注意的是，代理服务器和geoserver需要在同一域名下。 以上是解决vue+openlayer调用geoserver时跨域报错的方法。