Matrix 精选
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
Notion 可以将一个页面设置为公开显示，即我们可以将页面链接分享给任何用户，而他们在未注册、未登录 Notion 的前提下即可直接访问 Notion 公开页面。Notion 官方曾说可能会提供官方支持的「自定义域名」：即将 Notion 公开显示的页面绑定属于自己的域名，这一特点不仅可以方便用户直接定位你的 Notion 公开页面，还可以帮我们将 Notion 当作自己发布内容的地方，比如博客。不过目前 Notion 尚未提供类似的功能。
在 Notion 官方支持自定义域名之前，我们可以用「曲线救国」的方法为 Notion 进行域名的自定义 —— 我们可以使用 Cloudflare 的 Web Workers 为 Notion 的 HTTP 请求进行手动改写，使得我们通过自己的自定义域名同样可以访问 Notion 的公开页面。
准备工作
首先我们进入希望公开显示的 Notion 页面，点击右上角的 Share，并开启公共访问 Public Access，并将权限进行相应的设置。
将 Notion 页面设置为公开访问
复制 Notion 的公开页面链接，点击下拉菜单的 Copy Page Link，得到类似下面的公开链接：
另外，我们还需要将自己的域名转移到使用 Cloudflare 的 DNS 服务，否则之后无法设置相应的 Cloudflare Web Worker。
设置域名指向
我们进入 Cloudflare 的仪表盘，对域名进行配置。
首先，我希望我的「二级域名」，比如 tg.spencerwoo.com，指向 Notion；而我的主域名 spencerwoo.com 保持不变。这里我们增加一个 CNAME 记录：点击上方的 DNS 页面，在下面选择 Add record
在设置项中将 Type 设置为 CNAME，将名称 Name 设置为 tg(就是你主域名之前的那部分)，并将 Target 设置为 Notion 默认页面 notion.so
点击保存
设置 Notion 自定义域名的 DNS 解析服务
配置 Web Worker
接下来，我们配置 Cloudflare 的 Web Worker，使得访问我们上面定义域名的 HTTP 请求自动改写。
我们点击上方 Workers 页面，在下面选择 Launch Editor：
点击 Workers 页面，打开编辑器 Launch Editor
之后，在左侧侧边栏点击 Add script，为脚本命名为 notion-worker。之后，我们编辑脚本，向其中添加如下的内容：const MY_DOMAIN = "example.com"
const START_PAGE = "https://www.notion.so/link/to/your/public/page"
addEventListener('fetch', event => {
event.respondWith(fetchAndApply(event.request))
})
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, HEAD, POST,PUT, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
}
function handleOptions(request) {
if (request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null) {
// Handle CORS pre-flight request.
return new Response(null, {
headers: corsHeaders
})
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
"Allow": "GET, HEAD, POST, PUT, OPTIONS",
}
})
}
}
async function fetchAndApply(request) {
if (request.method === "OPTIONS") {
return handleOptions(request)
}
let url = new URL(request.url)
let response
if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {
response = await fetch(`https://www.notion.so${url.pathname}`)
let body = await response.text()
try {
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response)
// response = new Response(response.body, response)
response.headers.set('Content-Type', "application/x-javascript")
console.log("get rewrite app.js")
} catch (err) {
console.log(err)
}
} else if ((url.pathname.startsWith("/api"))) {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: {
'content-type': 'application/json;charset=UTF-8',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36'
},
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)
response.headers.set('Access-Control-Allow-Origin', "*")
} else if (url.pathname === `/`) {
let pageUrlList = START_PAGE.split("/")
let redrictUrl = `https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length-1]}`
return Response.redirect(redrictUrl, 301)
} else {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: request.headers,
method: request.method, // *GET, POST, PUT, DELETE, etc.
})
}
return response
}其中，将 MY_DOMAIN 设置为你的自定义域名，比如我的就是 tg.spencerwoo.com
再将 START_PAGE 设置为你的 Notion 公开页面的 URL，也就是准备工作第一步我们复制的那个 URL
编辑 Web Worker 脚本
之后点击 Deploy 保存并部署。之后我们回到刚刚的 Worker 页面，点击 Add Route：将路由 Route 设置为你的自定义域名后面加上通配符 /*，表示我们访问这一域名的全部下级内容，均指向这一 Web Worker
再将 Worker 设置为我们刚刚部署的 notion-worker，点击保存部署
添加路由指向 Web Worker
到这里我们的任务就基本完成啦。如果没有什么意外的话，我们直接访问我们的自定义域名(比如我的 tg.spencerwoo.com)即可定位到我们的公开 Notion 页面。
效果：访问我们自定义域名即可访问 Notion 公开页面
这里我们实际上使用的原理是利用 Cloudflare 的 Web Worker「边缘计算」的功能(Edge Computing)，来手动的将我们访问 Notion 页面的 HTTP 请求包中的 Host 修改为我们自己的域名。这一部署起来，由于 Cloudflare 强大的 cdn，我们甚至可能会发现我们 Notion 页面的访问速度变快了。就这样，感谢阅读。
> 下载少数派 客户端、关注 少数派公众号，找到数字时代更好的生活方式 🎊
> 特惠、好用的硬件产品，尽在 少数派 sspai 官方店铺 🛒
原文链接：https://blog.csdn.net/weixin_34941214/article/details/119231248?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816781647570962%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816781647570962&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-12-119231248-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/6918
