vue.config.js 配置代理跨域：

跨域的概念：

所谓的跨域指的是同源策略中协议、域名、端口三者都相同，如果有一个不相同，就是跨域。

1. 普通的HTTP协议请求是不存在跨域的。
2. 只有浏览器端的ajax请求存在跨域。
3. 浏览器要求当前页面和服务器必须同源，目的是为了安全，服务器与服务器之间没有跨域，页面中加载图片、线上的js或者css都不受同源策略限制，浏览器的script、img、form等标签都没有跨域。

解决跨域常见的方式有3种：JSONP、CORS、proxy。

1. JSONP的原理：利用的是script发送请求，不受限制。需要在前台script的src属性中设置目的地址及回调函数。后台需要处理请求，产生返回的数据，读取传入过来的回调函数，包括里面的请求参数，返回执行函数的js代码。这种方式只能处理get请求，每个请求在后台都要做处理，很麻烦。
2. CORS原理：后台中返回浏览器在某个域上，发送的跨域请求的相关响应头，需要配置跨域的地址、跨域的请求方式、跨域的请求字段、请求缓存的时间、跨域携带的 Cookie 等相关信息，前台不需要做任何处理，后台需要进行相关处理，但很麻烦。
3. proxy方式：只需要在对应的脚手架中设置 webpack 的配置项，比如处理地址的开头标识，目标服务器地址，是否允许跨域，路径是否重写等。

代理服务器：帮助我们转发请求的

1. 代理可以分为正向代理和反向代理
2. 正向代理代理的是客户端
3. 反向代理代理的是服务器端
4. 可以利用nginx进行反向代理，实现项目上线。

vue.config.js 中使用proxy方式解决跨域问题：

【 注意配置完之后要重启项目 】

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // 代理跨域
    proxy: {
      "/api": {
        target: 'http://sph-h5-api.atguigu.cn'
      }
    }
  }
})