前言

作为前端，你肯定用过@vue/cli或者vite创建的项目。通过这些脚手架创建的项目都可以本地启动一个服务，然后配置一个proxy代理就可以做到解决跨域。相信任何一个人都会配置，即使不会配置百度也能配置，下面就是一段在@vue/cli下的proxy配置代码：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: 'http://1.15.179.44:3001',
        // '/api/seller'   ->   http://1.15.179.44:3001/api/seller
        pathRewrite: {'^/api': ''}
      }
    }
  }
})

但是又有多少人知道前端脚手架是怎么解决跨域的了？要弄清楚这个问题，你要先有前置知识：

浏览器的同源策略
cors 可以参考这个链接

yarn serve发生了什么事情

在本地发开的时候我们会运行脚本命令：yarn serve。然后就可以进行愉快的开发了，那运行这行脚本命令的时候到底发生了什么事了，简单归纳有以下几点：

打包项目
- 以vue项目为例，浏览器是不认识.vue文件的。所以要将其打包为: html、css、js...
本地启动一个服务器
- 这就是为什么我们访问localhost:8080可以看到自己页面的原因
服务器拿到第一步得到的文件（这部分文件在内存中，更好的热更新，更好的开发体验）
浏览器访问localhost:8080加载相应的html、css、js

本地服务器解决跨域

基于上诉知识，我们画一个图：

接下来咱们开始请求你后端数据，假设后端接口地址为：http://127.0.0.2:3001。很明显和http：127.0.0.1:8080是不属于同源的，所以绝对不有跨域问题。如下图：

这个时候本地服务器来了，他作为一个代理服务器。浏览器的所有请求首先转发给代理服务器，由代理服务器做一次转发。

代理服务器与后端服务器之间不受同源策略影响可以做数据交互
代理服务器与浏览器属于同源，可以进行数据交互

前端脚手架解决跨域问题的原理

前言

yarn serve发生了什么事情

本地服务器解决跨域