关于vercel跨域处理方案

// 安装！！！！！！！！！！！！！！
npm  i -D http-proxy-middleware

截屏2021-05-27 下午4.57.03.png

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

1、api/proxy.js 目录结构也得一致

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

module.exports = (req, res) => {
  let target = ''

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

2、vercel.json 文件

{
 "rewrites": [
   {
     "source": "/backend/(.*)",
     "destination": "/api/proxy"
   }
 ]
}

http接口请求代码前缀记得换成 /backend/

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"/backend/"'
}

代码提交，默认自动部署到vercel了

操作两步骤：

1、打开项目，点击 Production

WeChate58af63721c20c2faac61ca58fdf14ac.png

1.5、点击... Promote to Production去处理跨域

截屏2021-08-27 下午2.33.02.png

2、选择api/proxy.js文件

截屏2021-05-27 下午5.06.15.png

3、我部署的项目,有兴趣可以试试看