[Bug] TypeError: Load Failed 在用了自己的API URL和API KEY后有这个报错，只存在于macos app端，浏览器插件正常

[exgbit]

Please search before asking

• [X] I searched in the issues and found nothing similar.

Please read README

• [X] I have read the troubleshooting section in the README in detail.

Please check your network and OpenAI API quota

• [X] I am sure it is not a network issue or an OpenAI API quota issue.

OpenAI Translator version

0.0.41

系统/浏览器版本 System/Browser version

macOS 13.2.1 (22D68)

复现步骤 Reproduce step

设置API URL和API KEY后有这个报错 这个错误只存在于macOS APP端，浏览器插件没有错误

你看到了什么错误？What errors do you see?

TypeError: Load Failed

你期望看到什么？What did you expect to see?

正常使用

还有其他的内容吗？Anything else?

没有

你是否愿意提交一份 PR 来修改这个错误？Are you willing to submit a PR?

• [ ] 我愿意提供 PR! I'm willing to submit a PR!

[wych42]

Same issue happens to me.

API URL and API TOKEN works on web browser extension but not on MacOS App

[maltoze]

尝试在你的自定义服务上添加允许跨域的 response header Access-Control-Allow-Origin: *

[wych42]

This Option request with no auth header cause the problem.

[maltoze]

@wych42 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#functional_overview

the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request.

[wych42]

@wych42 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#functional_overview

the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request.

Handle "options" request separately in proxy code solves this

code sample for reference(using cloudflare):

if (request.method === "OPTIONS") {
        // Handle CORS preflight requests
        return handleOptions(request);
}

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
  "Access-Control-Max-Age": "86400",
};

async function handleOptions(request) {
    // Handle CORS preflight requests.
    return new Response(null, {
      headers: {
        ...corsHeaders,
        "Access-Control-Allow-Headers": request.headers.get(
          "Access-Control-Request-Headers"
        ),
      },
    });
}