前端跨域的解决方案

1. 什么是跨域？

跨域指的是在Web开发中（浏览器中），当一个网页的源与当前页面的源不同时，就发生了跨域。

源是指协议（如HTTP）、主机名（如www.example.com）和端口号（如80），只有在这三者完全相同的情况下，才不会发生跨域。

这里博主想多提一嘴，跨域的最佳解决方案是不发生跨域，也就是将两个页面部署到同一个服务器上（协议、域名、端口号相同）！

1.2 跨域的解决方案：CORS机制

CORS（Cross-Origin Resource Sharing）是一个机制，用于解决浏览器的同源策略限制下的跨域资源访问问题。同源策略要求浏览器只能发送同源（协议、主机名、端口号相同）请求，因此跨域请求会被浏览器阻止。

CORS允许服务器指定哪些源（即域名）可以访问其资源，从而在一定程度上放宽了同源策略的限制。当浏览器发起跨域请求时，服务器可以在响应头中添加一个 Access-Control-Allow-Origin 字段来指定允许访问的源，例如：

Access-Control-Allow-Origin: https://www.example.com

这样，来自https://www.example.com域名下的请求就可以访问该资源。如果服务器允许多个源访问资源，可以使用通配符（*）来指定，如：

Access-Control-Allow-Origin: *

1.3 跨域的解决方案：代理转发

假如服务端没有配置CORS机制，此时出现了跨域，那么在开发阶段我们可以使用“代理转发”的解决方案。（仅限开发阶段）

博主这里通过 vue-cli 中集成的跨域解决方案，官文地址 配置参考 | Vue CLI

在前端项目的 vue.config.js 配置文件中，配置 devServer 项：

module.exports = {
  devServer: {
    # ... 省略
    # 代理配置
    proxy: {
        # 如果请求地址以/api打头, 就会触发代理机制
        '/api': {
          target: 'http://localhost:3000' # 目标服务器地址
        }
      }
    }
  }
}

这里注意一个细节：

配置了“代理转发”后，axios中的 baseURL 完全可以从绝对地址修改成相对地址，并且博主推荐你这样做，方便太多！示例代码：

# 绝对地址
const service = axios.create({
  baseURL: 'http://localhost:9588/api'
  ...
})

# 相对地址
# 相对当前服务器路径
const service = axios.create({
  baseURL: '/api'
  ...
})

End-------------------