vite配置跨域详解

一、什么是跨域

跨域指的是在浏览器中，一个正在运行在域名或端口号不同的JavaScript程序试图访问另一个JavaScript程序的资源。

跨域产生的原因是浏览器的同源策略，即JavaScript只能访问与当前页面主机名、协议、端口号相同的资源。

例如，当前网页URL为 http://www.example.com/，那么同源策略只允许JavaScript访问URL为 http://www.example.com/ 的资源。

二、为什么需要配置跨域

需要跨域访问的情况多种多样，例如：

• 前后端分离的项目，前端在独立的域名下，需要通过AJAX请求访问后端API。
• 前端需要在iframe中加载来自其它域名下的网页。
• 通过跨域脚本，前端需要在页面上引入来自其它域名下的JavaScript文件以实现某些功能。

以上都需要支持跨域访问才能正常运行。

三、vite中跨域的配置方法

vite是一个基于ES modules的构建工具，支持原生ES modules的引入和导出语法，无需类似webpack的繁琐配置即可启动项目，因此配置跨域也非常简单。

vite提供了一个server选项，可以自定义服务器相关配置。我们可以通过设置此选项来完成跨域的配置。

在package.json文件的"script"中添加一条命令用于启动vite：

然后在项目根目录下创建一个vite.config.js的文件，内容如下：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
})

以上配置会将所有以/api开头的HTTP请求代理到http://localhost:3000。

四、跨域配置参数详解

1. target

类型: string

默认值: undefined

规定请求的地址，可以是一个字符串或一个对象

• target: 'http://localhost:3000' 代理到某个地址
• target: { host: 'localhost', port: 3000 } 代理到某个地址

我们也可以使用代理函数的形式指定不同的代理规则：

import { defineConfig } from 'vite'

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

2. changeOrigin

类型: boolean

默认值: false

是否改变请求来源。如果设置为true，则源URL将作为原始请求头中的Host字段发送。

3. rewrite

类型: (path: string) => string | undefined

默认值: undefined

重写路径。用来重写请求路径，可以通过此选项去除基路径。

4. pathRewrite

类型: Record<string, string>

默认值: {}

路径重写规则。可以使用正则表达式进行匹配和替换。

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

以上配置会将以/api开头的请求重写为当前路径。

五、总结

vite中跨域的配置非常方便，只需要在vite.config.js中添加相应配置即可。我们可以通过设置server.proxy选项来完成跨域配置。同时，vite也支持代理函数的形式指定不同的代理规则，可以根据实际情况选择使用不同的方法完成跨域配置。