什么是跨域

跨域：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的。而axios是通过Promise实现对ajax技术的一种封装，也同样存在跨域问题。

解决方案

  1. 后端修改响应头

原理： 通过在后端服务器的响应头中添加 Access-Control-Allow-Origin 字段，允许指定域名或通配符下的前端访问资源。

优点： 简单易行，直接在后端代码中修改即可，无需额外配置。

缺点： 需要后端配合修改代码，对于跨域请求的控制力度有限。

  1. 前端反向代理

原理： 使用前端代理服务器，将跨域请求转发到目标服务器，然后将响应结果返回给前端。

优点： 无需后端配合，前端可以完全控制跨域请求，灵活度高。

缺点： 需要额外的代理服务器配置，可能会增加前端开发的复杂度。

vite配置

Vite 的 server 选项主要用于配置开发服务器，其中包含 proxy 属性，可以用来设置反向代理规则。

通过 proxy 属性，你可以将开发环境中的某些请求转发到其他服务器，从而解决跨域问题，或者访问不同的 API 服务。

举个例子，假设你想要将 /api 路径下的所有请求转发到 http://localhost:3000 服务器，你可以在 vite.config.js 文件中添加以下配置：

import { defineConfig } from 'vite';

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

解释：

  • target：指定要代理的目标服务器地址。
  • changeOrigin：设置为 true 表示将请求头中的 Origin 字段替换为代理服务器的地址，避免跨域问题。
  • rewrite：用于重写请求路径，将 /api 部分去掉，以便正确地转发到目标服务器。

除了 proxy 属性之外，server 选项还可以配置其他开发服务器参数，例如端口号、https 配置等。

总而言之，Vite 的 server 选项提供了一个强大的工具，可以方便地配置反向代理，解决跨域问题，并简化开发流程。