1.什么是跨域问题？

跨域（Cross-Origin Resource Sharing, CORS） 是浏览器的一种安全机制，限制从一个源（Origin）加载的文档或脚本如何与另一个源的资源进行交互。如果前端和后端服务部署在不同域名、协议或端口下，浏览器会默认阻止跨域请求，导致 API 调用失败。

1.1跨域问题的经典表现

1.浏览器控制台报错：

Access to XMLHttpRequest at 'http://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy.
Response to preflight request doesn't have HTTP ok status.

2.网络请求状态码显示 403 Forbidden 或 0 Unknown Error（网络层拦截）。

1.2跨域问题的产生原因

2.解决方案

跨域问题，前端和后端都可以进行处理，前端主要是proxy的正向代理

2.1 proxy正向代理定义

正向代理是一种网络代理服务，客户端（如浏览器、应用程序）主动向代理服务器发送请求，代理服务器再将请求转发到目标服务器，并将响应返回给客户端。
核心特点：

• 客户端知道目标服务器的身份，但目标服务器不知道客户端的真实身份（客户端 IP 被隐藏）

2.2 代码

如果要请求https://xx.xx.xx/getList接口

在vue.conf.js里面的导出模块写入

 proxy:{
      '/api':{     // /api 表示拦截以/api开头的请求路径
        target:'https://xx.xx.xx',//跨域的域名（不需要写路径）
        changeOrigin:true, //是否开启跨域
        ws:true,
        pathRewrite:{  //重写路径
          '^/api':''  //把/api变成空字符
        }
      }
    }

在需要调用接口的页面，调用接口的时候需要加上api ，即可

const res=await axios.get('/api/getList')

3.成功显示

如果有错，欢迎批评指正！！