前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于vercel跨域处理方案

关于vercel跨域处理方案

作者头像
程序员不务正业
发布2021-06-01 22:16:09
1.8K0
发布2021-06-01 22:16:09
举报

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

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

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

代码语言:javascript
复制
// 该服务为 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 文件

代码语言:javascript
复制
{
 "rewrites": [
   {
     "source": "/backend/(.*)",
     "destination": "/api/proxy"
   }
 ]
}
http接口请求代码前缀记得换成 /backend/
代码语言:javascript
复制
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"/backend/"'
}

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

操作两步骤:

1、打开项目,点击 Production

WeChate58af63721c20c2faac61ca58fdf14ac.png

2、选择api/proxy.js文件

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、api/proxy.js 目录结构也得一致
  • 2、vercel.json 文件
    • http接口请求代码前缀记得换成 /backend/
    • 代码提交,默认自动部署到vercel了
    • 操作两步骤:
    • 3、我部署的项目,有兴趣可以试试看
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档