Vue 3 + Vite 在 Vercel 部署及跨域配置指南

发表于 更新于 分类于 阅读次数：

前言

vite 项目可以直接部署到 vercel 上，不用做任何修改。但是这里会遇到一个问题，就是网站访问接口跨域。如果是普通的服务器，那么通常就是用 nginx 做反向代理。但是对于 Vercel 我们无法这么做。

解决方法

采用 vercel 上的配置做代理。

  1. 项目安装插件

    1
    pnpm install http-proxy-middleware

  2. 你的项目根目录新建一个文件.vercel.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //vercel.json文件
    {
      "rewrites": [
        //寻找/api下的文件 然后可以在/api/proxy文件中进行跨域处理
        {
          "source": "/api/(.*)",
          "destination": "/api/proxy"
        }
      ]
    }

  3. 在项目根目录建立这样一个文件/api/proxy.js 。用什么模块查看你的package.json。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // 该服务为 vercel serve跨域处理
    // const { createProxyMiddleware } = require('http-proxy-middleware') //commjs模块

    import { createProxyMiddleware } from "http-proxy-middleware"; // es模块
    // export.modules = (res, res) => {
    export default (req, res) => {
      let target = "";
      // 代理目标地址
      // xxxxx 替换为你跨域请求的服务器 如： <http://baidu.com>
      if (req.url.startsWith("/api")) {
        //这里使用/api可能会与vercel serverless 的 api 路径冲突，根据接口进行调整
        target = "<https://163.m.com>"; //这里就是在vite中配置的一样
      }
      // 创建代理对象并转发请求
      createProxyMiddleware({
        target,
        changeOrigin: true,
        pathRewrite: {
          // 通过路径重写，去除请求路径中的 `/api`
          "^/api/": "/",
        },
      })(req, res);
    };

  4. 修改项目的接口，由项目的当前地址访问。下面是我写的一个例子

    1
    2
    3
    4
    5
    6
    7
    8
    <script setup lang="ts">
    import { excludes } from "@/router/keepAlive";
    import axios from "axios";
    axios('/api/hello/say').then((res:any)=>{
      console.log(res)
    })
    // 假设接口https://163.m.com/say/hello， 删除前面的host，并且配合第3步的识别加上/api
    </script>

注意的点

  1. 这里注意一下，我之前把 hello 接口直接写在https://163.m.com上，结果导致一直访问404。增加了路径之后就可以正常访问了。
  2. 一定要保证你的后端项目是开启了跨域