当你的站是一个静态网站时,并且网站中有接口请求时,可能会出现跨域问题。那解决该问题的大部分的办法就是使用一个服务器做代理转发。
所以说到这就知道,还需要一个服务器,即:要花钱。那有什么办法吗?
说出来了当然有。
前提
使用 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 这个功能板块,如果上面的配置没有问题,并且已经重新部署,那么就会出现如下图:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F6e3b9650-f808-42ca-b395-e9556b205b01%2FUntitled.png%3Ftable%3Dblock%26id%3D55c5c8dd-5bf1-4448-821d-eb6b39f833b0%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1725739200000%26signature%3DAe1lC55OzuFHdX8vTqe8wo3CxEtHlf-n3zMyVW-_-6M?table=block&id=55c5c8dd-5bf1-4448-821d-eb6b39f833b0&cache=v2)
配置好后,就可以测试了。
假如我的静态网站在 Vercel 上的地址是 https://laomiao.site,那么根据 version.json 文件中的配置访问:
https://laomiao.site/notion-api/xxxxxxx
成功后会在 Functions 页面出现访问日志,如果没有那就说明有问题。
总结
我捋下流程。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F09bad507-dc5a-4c68-9aae-e32a7760c1b8%2FUntitled.png%3Ftable%3Dblock%26id%3D6cec2a36-0ef9-4ff6-99d2-a8d72292bc90%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1725739200000%26signature%3DSgUXo3aHJc1a5x87gDdxVXiLMdbHTpdJ3LRQ69sy_pQ?table=block&id=6cec2a36-0ef9-4ff6-99d2-a8d72292bc90&cache=v2)