Vercel跨域处理方案

安装插件

npm i -D http-proxy-middleware

在你前端工程根目录中创建以下两个文件

api/proxy.js

// api/proxy.js
// 该服务为 vercel serve跨域处理
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = (req, res) => {
    let target = ''
    // 代理目标地址
    // 这里使用 backend 主要用于区分 vercel serverless 的 api 路径
    // target 替换为你跨域请求的服务器 如： http://baidu.com
    if (req.url.startsWith('/backend')) {
        target = 'https://fanyi-api.baidu.com'
    }
    // 创建代理对象并转发请求
    createProxyMiddleware({
        target,
        changeOrigin: true,
        pathRewrite: {
            // 通过路径重写，去除请求路径中的 `/backend`
            // 例如 /backend/user/login 将被转发到 https://fanyi-api.baidu.com/user/login
            '^/backend/': '/',
        },
    })(req, res)
}

vercel.json 文件

{
 "rewrites": [
   {
     "source": "/backend/(.*)", // 准备匹配的接口
     "destination": "/api/proxy" // 配置路径
   }
 ]
}

http接口请求代码前缀记得换成/backend/
代码提交，默认自动部署到vercel了

设置vercel

1、打开项目，点击 Functions

2、选择api/proxy.js文件

完成