// 安裝！?。。。。。。。。。。。?！
npm  i -D http-proxy-middleware

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

在你前端工程中創(chuàng)建以下兩個(gè)文件

1、api/proxy.js 目錄結(jié)構(gòu)也得一致

// 該服務(wù)為 vercel serve跨域處理
const {
  createProxyMiddleware
} = require('http-proxy-middleware')

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

  // 代理目標(biāo)地址
  // 這里使用 backend 主要用于區(qū)分 vercel serverless 的 api 路徑
// xxxxx 替換為你跨域請求的服務(wù)器 如： http://baidu.com
  if (req.url.startsWith('/backend')) {
    target = 'xxxxxxx'
  }
  // 創(chuàng)建代理對象并轉(zhuǎn)發(fā)請求
  createProxyMiddleware({
    target,
    changeOrigin: true,
    pathRewrite: {
      // 通過路徑重寫，去除請求路徑中的 `/backend`
      // 例如 /backend/user/login 將被轉(zhuǎn)發(fā)到 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/"'
}

代碼提交，默認(rèn)自動(dòng)部署到vercel了

操作兩步驟：

1、打開項(xiàng)目，點(diǎn)擊 Production

WeChate58af63721c20c2faac61ca58fdf14ac.png

1.5、點(diǎn)擊... Promote to Production去處理跨域

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

2、選擇api/proxy.js文件

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

3、我部署的項(xiàng)目,有興趣可以試試看