Vercel 解决静态网站接口跨域

当你的站是一个静态网站时，并且网站中有接口请求时，可能会出现跨域问题。那解决该问题的大部分的办法就是使用一个服务器做代理转发。

所以说到这就知道，还需要一个服务器，即：要花钱。那有什么办法吗？

说出来了当然有。

前提

使用 vercel 托管你的静态网站。

开始配置

1. vercel.json

在你的项目根目录创建一个 vercel.json 文件，内容如下：


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

source：不直接请求接口地址，而是按照 source 格式的方式访问，该格式自己定义。

destination：将 source 匹配到的 url 转发到 destination 地址上。

2. destination

这个地址是在 vercel 上启动一个常驻服务生成的。

在项目根目录创建一个 api/proxy.js 路径的文件，按照这个路径要求来，该文件的内容如下：


// req：请求
// res：响应
module.exports = (req, res) => {
	// ...
}

然后在这个函数体内可以自己编写请求的转发。

看看我的写过的一个例子，用来转发 Notion API 接口。

完整例子：


const request = require('request');

module.exports = (req, res) => {
  // proxy middleware options
  let prefix = "/notion-api"
  if (!req.url.startsWith(prefix)) {
    return;
  }
  let target = "https://api.notion.com" + req.url.substring(prefix.length);

  var options = {
    'method': 'GET',
    'url': target,
    'headers': {
      'Notion-Version': res.headers['notion-version'],
      'Authorization': res.headers['authorization']
    }
  };
  request(options, function (error, response) {
    if (error) throw new Error(error);
    res.writeHead(200, {"Content-Type": "application/json"});
    res.write(response.body);
    res.end();
  });
}

该例子，就是从 req 参数里获取想要的数据，然后使用 request 发放进行转发。

2. Functions

写好后，如何运行这个文件呢？

在 Vercel 后台找到 Functions 这个功能板块，如果上面的配置没有问题，并且已经重新部署，那么就会出现如下图：

配置好后，就可以测试了。

假如我的静态网站在 Vercel 上的地址是 https://laomiao.site，那么根据 version.json 文件中的配置访问：


https://laomiao.site/notion-api/xxxxxxx

成功后会在 Functions 页面出现访问日志，如果没有那就说明有问题。

总结

我捋下流程。