---
date: 2022-09-12
title: Vercel 云函数 Functions 进行域名转发 解决跨域等问题
category: experience
cover: /images/631f3d52e1d09.webp
recommend: true
original: true
location: 甘肃
tags:

- Vercel
- 云函数
- 域名转发

---

### 前言

因为我这个博客是托管在 `Vercel` 上的，加载图片总感觉有些慢奈何现在有没有什么好的博客图床解决方案，遂找了个轻量云服务器搞了个自建图床，当我美滋滋的把图片替换部署的时候，Md
谷歌居然把 `http` 协议的图片拦截了，因为现在貌似 `ssl` 的站点都不允许有 `http` 请求了，所以就有了用 `Vercel`
云函数去进行域名转发这个想法，去翻了下 `Vercel` 的云函数文档，果然是有 `rewrite`
这个功能，踩了半天坑也是鼓捣好了，就是通过转发之后图片资源还是非常的慢。遂弃用，自建的图床也成了图片格式在线转换工具 -、- ~~~

虽然转发图床这条路行不通，但是不免有人会遇到 `api`
这方面的问题，也可以用同样的方法解决。归根到底图床是因为本身请求的资源就比较大，所以比较慢，但是 `api`
没有大量运算的估计还是非常好用的，也算是给自己做个记录吧，以免以后遇到同样的问题又去踩一遍坑。

### 实现代码

- `proxy.js` 是 `Vercel` 的云函数

```js
// api/proxy.js
const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = (req, res) => {
    let target = ''
    if (req.url.startsWith('/images')) {
        target = 'http://www.baidu.com/' // 需要代理的域名
    }
    // 创建代理对象并转发请求
    createProxyMiddleware({
        target,
        changeOrigin: true,
        pathRewrite: {
            '^/images/': '/',
        },
    })(req, res)
}
```

- `package.json` 是必须要有的，不然会提示你找不到包，不用自己构建，上传后会自动构建

```json
// package.json
{
  "dependencies": {
    "http-proxy-middleware": "^2.0.6"
  }
}
```

- `vercel.json` 是 `Vercel` 的配置文件

```json
// vercel.json
{
  "rewrites": [
    {
      "source": "/images/(.*)",
      "destination": "/api/proxy"
    }
  ]
}
```