VUE2和VUE3跨域问题的解决

项目场景：

在做项目过程中，接触到了这样一个场景，就是想用前端axios直接请求es的查询url，但是这样就涉及到了跨域问题，由于我并没有写后端，只是直接从es中去查询，所以这个跨域部分只能从前端实现了，查了很多的博客，发现大多数是讲VUE3怎么跨域的，找了一段时间才把VUE2的跨域解决了，就在这里记录一下，把VUE3和VUE2的都写出来，VUE2经过实际测试是没有问题的，3还没有测试，不过网上都是这么写的，问题应该不大。

---

问题描述

首先，没有配置跨域的话，会报这个错误

Access to XMLHttpRequest at 'http://101.34.56.91:9200/api/fingerprinting/_search' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

解决方案：

VUE2：

在config文件夹下的index.js

在proxyTable属性下添加如下配置

 proxyTable: {
      // 下面是接口的路径，我的接口 地址是http://ad.why.com/login
      '/api': {
        // 需要转发代理的域名（就是你最终想访问的那个地址）
        target: 'http://IP:port',
        // 如果是https接口，需要配置这个参数
        secure: false,
        // 如果接口跨域，需要进行这个参数配置
        changeOrigin: true,
        // 这是一个通配符，设置完了之后每个接口都要在前面加上/api（特别注意这一点）
        pathRewrite: {
          '^/api': '/'
        }
      }
    }

 

vue3的解决方案：

在根目录下增加vue.config.js,添加如下配置

module.exports={
    devServer:{
        open:true,//自动开启浏览器
        proxy:{ //设置devServe解决跨域问题
            "/api":{
                // 我们需要告诉devserver帮我们解决那个地址的跨域
                   //这是我们想要访问的地址
                target:"http://localhodt/5000",
                changeOrigin:true,//控制服务器收到的请求头中的Host的值，如果不加(changeOrigin:flase) host的只为3000，如果加了(changeOrigin;true)以后值为5000
                ws:true,
                // 重写路径
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
}

最后我们在请求过程中应该这么写

//在你原来的请求url上加上/api 
this.axios.get("/api/requestUrl").then(response => {
      console.log(response)
      
    })