说明

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

关键代码

workers.js

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相关代码:

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")
}