利用Cloudflare Pages 与 Workers 搭建无服务器前端服务

发表于 更新于 分类于 ，

说明

Cloudflare 支持每天免费10万请求,结合本项目需求完全满足请求需要,也可通过本方案中Pages部分实现无服务器blog

关键代码

workers.js

1
2
3
4
5
6
7
8
9
10
addEventListener('fetch', event => {
  const request = event.request;
  const url = new URL(request.url);
  const response = fetch('http://domain.com' + url.pathname + url.search, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
  event.respondWith(response);
});

说明

前端服务地址则应该填写 api.domain.com

Pages

Pages可以把前端打包进行Pages上传,上传结束后进行自定义域配置 www.domain.com

问题

跨域问题

由于没了nginx做跨域配置我们可能需要再服务端进行相关配置,如本身Golang相关代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package middleware

import "net/http"

// CorsMiddleware 跨域请求处理中间件
type CorsMiddleware struct {
}

// NewCorsMiddleware 新建跨域请求处理中间件
func NewCorsMiddleware() *CorsMiddleware {
	return &CorsMiddleware{}
}

// Handle 跨域请求处理
func (m *CorsMiddleware) Handle(next http.HandlerFunc) http.HandlerFunc {
	return func(w http.ResponseWriter, r *http.Request) {
		setHeader(w)

		// 放行所有 OPTIONS 方法
		if r.Method == "OPTIONS" {
			w.WriteHeader(http.StatusNoContent)
			return
		}

		// 处理请求
		next(w, r)
	}
}

// Handler 跨域请求处理器
func (m *CorsMiddleware) Handler() http.Handler {
	return http.HandlerFunc(
		func(w http.ResponseWriter, r *http.Request) {
			setHeader(w)

			if r.Method == "OPTIONS" {
				w.WriteHeader(http.StatusNoContent)
			} else {
				w.WriteHeader(http.StatusNotFound)
			}
		},
	)
}

// setHeader 设置响应头
func setHeader(w http.ResponseWriter) {
	w.Header().Set("Access-Control-Allow-Origin", "*")
	w.Header().Set(
		"Access-Control-Allow-Headers",
		"Content-Type, X-CSRF-Token, Authorization, AccessToken, Token, Lang, CLIENT-ID",
	)
	w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, PATCH")
	w.Header().Set(
		"Access-Control-Expose-Headers",
		"Content-Length, Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Headers",
	)
	w.Header().Set("Access-Control-Allow-Credentials", "true")
}