从 JS 到 Cloudflare Workers 不存在“Access-Control-Allow-Origin”标头错误

Question

我在 Cloudflare Workers 上有一个 Javascript 边缘函数。它唯一做的就是检查特定标头并返回包含相应值的 JSON

请参阅下面的代码

async function handleRequest(request) {

  const url = new URL(request.url);

  const psk_db = await KV_STORAGE.get(request.headers.get(PRESHARED_AUTH_HEADER_KEY));


  if (psk_db === null) {
    return new Response("Access denied", { status: 404 });
  }
  else{
    //calculate number

    //return JSON
    const data = {
      pswd: psk_db,
    };

    json = JSON.stringify(data, null, 2);
  }

  return new Response(json, {
      headers: {
        'content-type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': url.origin,
      },
    })

}



addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

现在，该函数在 cloudflare 测试环境中运行良好，但是当我尝试使用运行此 javascript 函数的按钮从 html 页面请求时

function RequestCode() {
  const Http = new XMLHttpRequest();
  const url = "https://code-return.dev-malv.workers.dev";

  Http.open("GET", url);
  Http.setRequestHeader("Access-Control-Allow-Origin", "*");
  Http.setRequestHeader("X-Custom-PSK", "m_custom_key");
  Http.send();

  Http.onreadystatechange = (e) => {
    console.log(Http.responseText);
  };
}

我收到错误

从源“null”访问“my_workers_url”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我已经在两侧添加了Access-Control-Allow-Originat*但它不起作用

我该怎么做才能避免该错误？

已经阅读了这个和这个，但这并不能解决问题

Answer 1

问题是工作人员没有回答 OPTIONS 请求。

解决方案是处理这些类型的请求

if (request.method === "OPTIONS") {
    return handleOptions(request)
  }

和

function handleOptions(request) {
  if (request.headers.get("Origin") !== null &&
      request.headers.get("Access-Control-Request-Method") !== null &&
      request.headers.get("Access-Control-Request-Headers") !== null) {
    // Handle CORS pre-flight request.
    return new Response(null, {
      headers: corsHeaders
    })
  } else {
    // Handle standard OPTIONS request.
    return new Response(null, {
      headers: {
        "Allow": "GET, OPTIONS",
      }
    })
  }
}

和

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, OPTIONS",
  "Access-Control-Allow-Headers": "*",
}

显然Access-Control-Allow-Origin，Access-Control-Allow-Headers仅添加

参考https://community.cloudflare.com/t/handling-preflight-requests/30260/3