Workers如何实现类似Nginx location的功能？

MoeWang

如题，是这样的，我把原来vercel的b2对象存储反代移到workers来了（看中了带宽联盟），然后我就找了找论坛里的workers反代隐藏path，然后就卡在这里了。。原因是我在vercel里面设置过不同的路由，比如/avatar/的path是用来反代gravatar的，传入的path符合条件的话（比如https://workers/avatar/xxxxxx）就执行反代gravatar的代码；

如果传入的URL不包含avatar（比如https://workers/test.jpg或者https://workers/public/123.js）就继续反代对象存储。

让我写个nginx或者vercel的那种path路由我会，但是换用service workers就真的不会了，

主要是如何监听不同路径这块代码不是很熟悉。如果要想复杂些的话这种要用if吗？

然后可能真的没找对关键词，网上我就没搜着service workers 分path执行的相关教程，所以来问问各位大佬。能给我一篇讲如何监听不同目录的文档或者教程也行。。吐了。。。救救孩子吧

目前搜到的代码如下：

1. 
   
2. //gravatar反代
   
3. addEventListener(
   
4.   "fetch",event => {
   
5.     let url=new URL(event.request.url);
   
6.     url.hostname="secure.gravatar.com";
   
7.     url.pathname="/avatar/";
   
8.     let request=new Request(url,event.request);
   
9.      event. respondWith(
   
10.        fetch(request)
    
11.        )
    
12.        }
    
13.         )
    
14. 
    
15. //gravatar反代 结束
    
16. //B2 存储隐藏桶 开始
    
17. 'use strict';
    
18. const b2Domain = 'cdn.xxxxx'; // configure this as per instructions above
    
19. const b2Bucket = 'xxxxxxx; // configure this as per instructions above
    
20. const b2UrlPath = `/file/${b2Bucket}/`;
    
21. addEventListener('fetch', event => {
    
22.         return event.respondWith(fileReq(event));
    
23. });
    
24. 
    
25. // define the file extensions we wish to add basic access control headers to
    
26. const corsFileTypes = ['png', 'jpg', 'gif', 'jpeg', 'webp'];
    
27. 
    
28. // backblaze returns some additional headers that are useful for debugging, but unnecessary in production. We can remove these to save some size
    
29. const removeHeaders = [
    
30.         'x-bz-content-sha1',
    
31.         'x-bz-file-id',
    
32.         'x-bz-file-name',
    
33.         'x-bz-info-src_last_modified_millis',
    
34.         'X-Bz-Upload-Timestamp',
    
35.         'Expires'
    
36. ];
    
37. const expiration = 31536000; // override browser cache for images - 1 year
    
38. 
    
39. // define a function we can re-use to fix headers
    
40. const fixHeaders = function(url, status, headers){
    
41.         let newHdrs = new Headers(headers);
    
42.         // add basic cors headers for images
    
43.         if(corsFileTypes.includes(url.pathname.split('.').pop())){
    
44.                 newHdrs.set('Access-Control-Allow-Origin', '*');
    
45.         }
    
46.         // override browser cache for files when 200
    
47.         if(status === 200){
    
48.                 newHdrs.set('Cache-Control', "public, max-age=" + expiration);
    
49.         }else{
    
50.                 // only cache other things for 5 minutes
    
51.                 newHdrs.set('Cache-Control', 'public, max-age=300');
    
52.         }
    
53.         // set ETag for efficient caching where possible
    
54.         const ETag = newHdrs.get('x-bz-content-sha1') || newHdrs.get('x-bz-info-src_last_modified_millis') || newHdrs.get('x-bz-file-id');
    
55.         if(ETag){
    
56.                 newHdrs.set('ETag', ETag);
    
57.         }
    
58.         // remove unnecessary headers
    
59.         removeHeaders.forEach(header => {
    
60.                 newHdrs.delete(header);
    
61.         });
    
62.         return newHdrs;
    
63. };
    
64. async function fileReq(event){
    
65.         const cache = caches.default; // Cloudflare edge caching
    
66.         const url = new URL(event.request.url);
    
67.         if(url.host === b2Domain && !url.pathname.startsWith(b2UrlPath)){
    
68.                 url.pathname = b2UrlPath + url.pathname;
    
69.         }
    
70.         let response = await cache.match(url); // try to find match for this request in the edge cache
    
71.         if(response){
    
72.                 // use cache found on Cloudflare edge. Set X-Worker-Cache header for helpful debug
    
73.                 let newHdrs = fixHeaders(url, response.status, response.headers);
    
74.                 newHdrs.set('X-Worker-Cache', "true");
    
75.                 return new Response(response.body, {
    
76.                         status: response.status,
    
77.                         statusText: response.statusText,
    
78.                         headers: newHdrs
    
79.                 });
    
80.         }
    
81.         // no cache, fetch image, apply Cloudflare lossless compression
    
82.         response = await fetch(url, {cf: {polish: "lossless"}});
    
83.         let newHdrs = fixHeaders(url, response.status, response.headers);
    
84. 
    
85.   if(response.status === 200){
    
86. 
    
87.     response = new Response(response.body, {
    
88.       status: response.status,
    
89.       statusText: response.statusText,
    
90.       headers: newHdrs
    
91.     });
    
92.   }else{
    
93.     response = new Response('Not Found!', { status: 404 })
    
94.   }
    
95. 
    
96.         event.waitUntil(cache.put(url, response.clone()));
    
97.         return response;
    
98. }
    
99. //B2 存储桶 结束

复制代码

另外本帖不会255，我也没有255的习惯

滴滴单车

https://github.com/kwhitley/itty-router
https://github.com/cfworker/cfworker/tree/main/packages/web
https://github.com/berstend/tiny-request-router

MoeWang

滴滴单车 发表于 2021-7-10 19:22
https://github.com/kwhitley/itty-router
https://github.com/cfworker/cfworker/tree/main/packages/web
...

感谢大佬，有头绪了，待会试试