资源被解释为样式表，但在cloudflare worker中以MIME类型text / html传输

问题描述

我正在尝试添加一个外部CSS文件，并且我知道了使用此答案Adding External Stylesheet using JavaScript

添加的方法

并使用它来尝试添加外部文件，但是这里出现错误是我尝试运行的代码

def ss():
    win = FindWindow(None,'Title of the window')
    rect = GetwindowRect(win)
    list_rect = list(rect)
    list_frame = [-9,-38,9,9]
    final_rect = tuple((map(lambda x,y:x-y,list_rect,list_frame))) #subtracting two lists

    img = ImageGrab.grab(bBox=final_rect)
    img.save('Image.png')

当我在firefox中运行此代码时，就会出现此错误

未加载样式表https://staticpage.practice.workers.dev/main.css，因为其MIME类型“ text / html”不是“ text / css”。

解决方法

问题在于您在每个路径中都提供相同的HTML。

当您使用浏览器访问站点时，首先浏览器请求页面，然后页面按预期方式获取HTML。但是您的HTML包含一些JavaSript，该JavaSript构造了如下标记：<link rel="stylesheet" type="text/css" href="main.css">当您的浏览器看到此标记时，它将尝试加载main.css作为样式表。由于这是相对路径，因此它将尝试从为HTML提供服务的同一服务器上加载它。但是该服务器是您的工作人员，您的工作人员始终会响应每个请求返回您的HTML。因此，当浏览器请求main.css时，它将再次获取HTML。这不是有效的样式表，因此它抱怨您看到的错误。

您可以尝试将工作人员的handleRequest()方法更改为类似的方法：

async function handleRequest(request) {
  let url = new URL(request.url);
  if (url.pathname === "/") {
    return new Response(html,{
      headers: {
        'content-type': 'text/html;charset=UTF-8',},})
  } else if (url.pathname === "/main.css") {
    // TODO: return your stylesheet here.
  } else {
    return new Response("Not found",{status: 404});
  }
}

或者，如果您打算从其他主机名而不是从工作人员加载样式表，则应更改此行：

element.setAttribute("href","main.css");

包含标准网址，例如：

element.setAttribute("href","https://example.com/main.css");