// 安装！！！！！！！！！！！！！！
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
