为什么会产生跨域?

浏览器的同源策略:

同源策略（Same-Origin Policy）是一种安全策略，用于Web浏览器中限制不同源（Origin）之间的交互。源指的是组成URL的协议、主机名和端口号。

同源策略的目的是防止恶意网站通过脚本等方式访问其他源的敏感数据或进行未经授权的操作。它通过限制不同源之间的访问来确保Web应用程序的安全性。

根据同源策略，以下情况被认为是不同源的：

- 1：协议不同：

两个URL的协议部分不同，例如http和https。

- 2：主机名不同：

两个URL的主机名部分不同，例如www.example.com和api.example.com。

- 3：端口号不同：

两个URL的端口号部分不同，例如example.com:8080和example.com:3000。

如果两个URL在协议、主机名和端口号上完全相同，它们被认为是同源的。

前端PROXY解决跨域问题的方法:

PROXY服务器代理

客户端向代理服务器发送请求，例如：http://localhost:8080/api/getData
代理服务器收到请求后，将请求转发给真正的服务器，例如：www.example.com/api/getData
真正的服务器返回请求结果给代理服务器
代理服务器将请求结果返回给客户端

修改.env.development中的环境变量,将base api修改为 /api(代理,当向/api请求时就会向自身的服务器进行请求)

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'

配置vue.config.js

// 配置代理转发
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        // 只要请求地址中有/api就会进入
        /* http://localhost:9528/api/sys/login => https://heimahr.itheima.net/api/sys/login */
        target: 'https://api-hmzs.itheima.net'
      }
    }
  },

前端PROXY解决CORS问题