什么是跨域？

所谓跨域，是指在同一个浏览器中，当前页面的域名与请求目标资源的域名不一致，即跨越了域的边界。例如，在a.com的页面中向b.com发起AJAX请求，这就是一个跨域请求。

为什么会跨域?

由于同源策略的限制，浏览器无法直接发出跨域请求。同源策略是指浏览器阻止从脚本发起的跨域HTTP请求，它要求脚本只能访问与其所在文档具有相同域名、协议和端口的资源。

为什么要跨域？

跨域请求是一种安全保护机制，它阻止了多个域名之间的数据传输，以防止信息泄露、CSRF等安全问题的发生。浏览器默认不允许跨域请求，但可以通过特定的技术手段来实现。

怎么解决跨域？

• JSONP（JSON with Padding）：JSONP 是一种通过动态创建

• CORS（Cross-Origin Resource Sharing）：CORS 是一种跨域资源共享的技术。在服务端配置允许跨域访问的响应头，浏览器在发起跨域请求时会先发送一个 OPTIONS 请求，服务端返回允许跨域访问的响应头，然后浏览器才会发送真正的跨域请求。

• 代理（重点）：通过在同一域名下建立一个代理服务器来转发跨域请求。前端代码将请求发送到代理服务器上，代理服务器再将请求发送到目标服务器上，并将响应返回给前端。

• WebSocket：WebSocket 是一种全双工通信协议，它可以在浏览器和服务器之间建立一个长连接。由于 WebSocket 建立的是 TCP 连接，不会受到同源策略的限制，因此可以用来实现跨域通信。

前端通过代理解决跨域：

Webpack：在 webpack.config.js 中配置 devServer.proxy 来实现代理。 Vite：在 vite.config.js 中配置 server.proxy 来实现代理。

具体实现方式：

当浏览器发出请求时，请求会先经过开发服务器（devServer），开发服务器会将请求转发到代理服务器，代理服务器会将请求发送到目标服务器，然后将目标服务器的响应返回给开发服务器，最后开发服务器将响应返回给浏览器。通过这样的方式，可以绕过浏览器的同源策略，实现跨域请求。

需要注意的是，跨域请求需要后端设置 CORS（跨域资源共享）或者 JSONP（JSON with Padding）等方式支持，否则即使使用代理也无法解决跨域问题。因此，在进行跨域请求时，需要确保目标服务器已经设置了 CORS 或者支持 JSONP 等方式。

通过配置代理：在 vue.config.js（对于使用 webpack 构建的项目）或 vite.config.js（对于使用 vite 构建的项目）中，我们可以通过配置 devServer.proxy（对于 webpack）或 server.proxy（对于 vite）来实现代理。例如：

// webpack 的配置
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

// vite 的配置
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
};

上面的配置将所有以 /api 开头的请求转发到 http://localhost:3000 上，并且通过 changeOrigin 和 pathRewrite 或 rewrite 来解决跨域问题。