使用Cloudflare网站后台不缓存和加速的问题（原创）：

在 Cloudflare Workers 部署一个 Worker 时，它会在30秒之内部署到 Cloudflare 的整个边缘网络，全世界95个国家/200个城市节点。域中的每个请求都会由离用户更近地点的 Worker 来处理，基于此来实现代码的 “随处运行”。

借助 Cloudflare Workers，开发人员能够在 Cloudflare 的全球云网络上部署无服务器的 JavaScript 应用程序，应用程序能够在这个网络中无缝扩展，更加接近最终用户。 Workers 基于 Service Workers API 构建，可为向应用程序发出的每次 HTTP(S) 请求接收事件。 然后，Workers 运行应用程序逻辑，并可向 Cloudflare Cache、Cloudflare Workers KV 或应用程序原始服务器发出后续请求，以将数据返回给用户。 Workers 在 Cloudflare 全球云网络中的位置为无服务器创建了以下用例：

计费相关

在 overview 页面可参看使用情况。

• 免费版每天有 10 万次免费请求，并且有每分钟1000次请求的限制，每个请求最多占用 10 毫秒 CPU 时间。超过限制后，会返回错误。
• 每月 $5 的高级版本，每月可用 1000 万次请求（超出部分 $0.5/百万次请求），每个请求最多占用 50 毫秒 CPU 时间。

我百度了很多教程都是有关于镜像网站代码，但是我多站的问题就是加载不了图片。如下图

首页的图片加载不出来，

我也试过用WordPress.的wp-config.php文件最下面加以下代码，

define(‘WP_SITEURL’, ‘https://’ . $_SERVER[‘HTTP_HOST’]);
define(‘WP_HOME’, ‘https://’ . $_SERVER[‘HTTP_HOST’]);
define( ‘WP_CONTENT_URL’, ‘/wp-content’);

但是不管用，还是图片加载不出来，

网站上搜索镜像代码是：

// 你要镜像的网站.
const upstream = 'www.dhzj.org'
// 镜像网站的目录，比如你想镜像某个网站的二级目录则填写二级目录的目录名，镜像 google 用不到，默认即可.
const upstream_path = '/'
// 镜像站是否有手机访问专用网址，没有则填一样的.
const upstream_mobile = 'www.dhzj.org'
// 屏蔽国家和地区.
const blocked_region = ['TP']
// 屏蔽 IP 地址.

const blocked_ip_address = ['0.0.0.0', '127.0.0.1']
// 镜像站是否开启 HTTPS.
const https = true
// 文本替换.
const replace_dict = {
    '$upstream': '$custom_domain',
}
// 以下保持默认，不要动
addEventListener('fetch', event => {
    event.respondWith(fetchAndApply(event.request));
})
async function fetchAndApply(request) {
    const region = request.headers.get('cf-ipcountry').toUpperCase();
    const ip_address = request.headers.get('cf-connecting-ip');
    const user_agent = request.headers.get('user-agent');
    let response = null;
    let url = new URL(request.url);
    let url_hostname = url.hostname;
    if (https == true) {
        url.protocol = 'https:';
    } else {
        url.protocol = 'http:';
    }
    if (await device_status(user_agent)) {
        var upstream_domain = upstream;
    } else {
        var upstream_domain = upstream_mobile;
    }
    url.host = upstream_domain;
    if (url.pathname == '/') {
        url.pathname = upstream_path;
    } else {
        url.pathname = upstream_path + url.pathname;
    }
    if (blocked_region.includes(region)) {
        response = new Response('Access denied: WorkersProxy is not available in your region yet.', {
            status: 403
        });
    } else if (blocked_ip_address.includes(ip_address)) {
        response = new Response('Access denied: Your IP address is blocked by WorkersProxy.', {
            status: 403
        });
    } else {
        let method = request.method;
        let request_headers = request.headers;
        let new_request_headers = new Headers(request_headers);
        new_request_headers.set('Host', url.hostname);
        new_request_headers.set('Referer', url.hostname);
        let original_response = await fetch(url.href, {
            method: method,
            headers: new_request_headers
        })
        let original_response_clone = original_response.clone();
        let original_text = null;
        let response_headers = original_response.headers;
        let new_response_headers = new Headers(response_headers);
        let status = original_response.status;
        new_response_headers.set('access-control-allow-origin', '*');
        new_response_headers.set('access-control-allow-credentials', true);
        new_response_headers.delete('content-security-policy');
        new_response_headers.delete('content-security-policy-report-only');
        new_response_headers.delete('clear-site-data');
        const content_type = new_response_headers.get('content-type');
        if (content_type.includes('text/html') && content_type.includes('UTF-8')) {
            original_text = await replace_response_text(original_response_clone, upstream_domain, url_hostname);
        } else {
            original_text = original_response_clone.body
        }
        response = new Response(original_text, {
            status,
            headers: new_response_headers
        })
    }
    return response;
}
async function replace_response_text(response, upstream_domain, host_name) {
    let text = await response.text()
    var i, j;
    for (i in replace_dict) {
        j = replace_dict[i]
        if (i == '$upstream') {
            i = upstream_domain
        } else if (i == '$custom_domain') {
            i = host_name
        }
        if (j == '$upstream') {
            j = upstream_domain
        } else if (j == '$custom_domain') {
            j = host_name
        }
        let re = new RegExp(i, 'g')
        text = text.replace(re, j);
    }
    return text;
}
async function device_status(user_agent_info) {
    var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < agents.length; v++) {
        if (user_agent_info.indexOf(agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

于是我自己整理整个网站加速和图片加载不出来的的办法：

首先我们先把wp后台的缓存规则弄一下，

cloudflare 第一条规则首先排除掉不需要缓存的目录，比如WordPress的后台即wp-admin路径。

第二条评论不缓存直接回源，*/comment-page-*

第三条规则就是缓存内容的规则了，前面已经将不需要缓存的排除掉了，直接缓存全站即可。

以上就是WordPress适用于CloudFlare免费CDN的缓存规则，本站长就是用的免费的。如果你们有付费的可以继续添加规则，由于站长没有付费就写不出多于的规则来了。

下面我们就创建

通过CloudFlare Workers实现反代：

自己命名想要的名字

创建好以后，编辑CloudFlare Workers服务，并写入以下代码即可。

addEventListener(
  "fetch",event => {
     let url=new URL(event.request.url);
     url.hostname="www.dhzj.org";  //你需要反代的域名
     let request=new Request(url,event.request);
     event. respondWith(
       fetch(request)
     )
  }
)

然后我们添加路由，打开域名的内部

Workers 路由，添加路由

此路由的故障模式：
这个是自己选择的，你们自己看看内容就知道了，

虽然10w的请求，对小站是够用了，

通过CloudFlare Pages实现反代

因为CloudFlare Pages可以连接Github，所以我们有两种方案
1.直接上传反代脚本.
2.将脚本文件托管在Github上，可实时更新.

1.直接上传反代脚本.

首先创建CloudFlare Pages服务，选择直接上传.

然后创建一个项目文件夹（名字可以随意），在文件夹内创建一个_worker.js的文件，并写入以下代码：

export default {
  async fetch(request, env) {
    const _url = new URL(request.url);
    _url.hostname = _url.pathname.startsWith("/gh/")
      ? "cdn.jsdelivr.net"
      : "www.baidu.com";
    const req = new Request(_url, request);
    return fetch(req);
  },
};

将项目文件夹拖拽到上传区域进行上传（注意：是上传项目文件夹），然后部署项目.

将脚本文件托管在Github上，可实时更新.

 

首先创建一个Git项目，然后creating a new file 一个_worker.js的JS文件并写入以下代码保存.

export default {
  async fetch(request, env) {
    const _url = new URL(request.url);
    _url.hostname = _url.pathname.startsWith("/gh/")
      ? "cdn.jsdelivr.net"
      : "www.baidu.com";
    const req = new Request(_url, request);
    return fetch(req);
  },
};

 

然后创建CloudFlare Pages服务，选择连接到Git，选择你刚刚创建的Git项目，开始设置。
使用默认配置，并保存部署即可。

这样，我们通过CloudFlare Pages创建的服务已经成功了.

由于CloudFlare Pages自带的免费pages.dev域名国内访问也是很不稳定，这里极其建议同学们绑定自定义域名进行访问！
方法也很简单，首先打开CloudFlare Pages，选择你刚刚创建的服务
然后 点击自定义域 => 设置自定义域名 => 进行CNAME解析 => 激活域 即可大功告成！

 

以上内容，我们已经完成了两种反向代理的搭建，大家自行选择一种，坚持能跑就行的原则，继续接下来的缓存步骤.

配置Github加速文件的边缘缓存

选择你得域名，点击 规则 => 页面规则 => 创建页面规则
如图所示，设置以下规则，并保存部署页面规则即可.

最后我们访问一下,

这样就解决了多站图片无法加载的问题，也解决了网站加速的问题，也解决请求问题。