Method OPTIONS not allowed, status 405 - Response.

[michaelusantiago]

Describe the bug

When I make a CORS call on my API, I get the Method Options not allowed response status 405 and in the browser it will throw the 403 forbidden status.

Reproduction

hook.server.ts or the hooks/index.ts prior to 1.0

export const handle: Handle = async ({ event, resolve }) => {
    const api_key = event.request.headers.get('API-KEY');
    event.locals.client = await JSON.parse(event.request.headers.get('client') as string);
``
    const response = await resolve(event) as Response;

    response.headers.set("Access-Control-Allow-Origin", "*");
    response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
    response.headers.set("Access-Control-Allow-Headers", "*");
    response.headers.set("Access-Control-Allow-Credentials", "true");

    if (event.url.pathname.startsWith('/api') && (api_key !== process.env.API_KEY)) {
        return new Response(null, { status: 404 });
    }

    return response
} 

Logs

Response {
  [Symbol(realm)]: { settingsObject: {} },
  [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: false,
    requestIncludesCredentials: false,
    type: 'default',
    status: 405,
    timingInfo: null,
    cacheState: '',
    statusText: '',
    headersList: HeadersList {
      cookies: null,
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    },
    urlList: [],
    body: {
      stream: undefined,
      source: 'OPTIONS method not allowed',
      length: 26
    }
  },
  [Symbol(headers)]: HeadersList {
    cookies: null,
    [Symbol(headers map)]: Map(3) {
      'allow' => [Object],
      'content-length' => [Object],
      'content-type' => [Object]
    },
    [Symbol(headers map sorted)]: null
  }
}

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-3320M CPU @ 2.60GHz
    Memory: 1.03 GB / 5.87 GB
  Binaries:
    Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.48)
    Internet Explorer: 11.0.19041.1566

Severity

blocking an upgrade

Additional Information

In my old version using sveltekit version prior to 1.0, I don't get this issue. Here is the Response.

Response {
  [Symbol(realm)]: { settingsObject: {} },
  [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: false,
    requestIncludesCredentials: false,
    type: 'default',
    status: 200,
    timingInfo: null,
    cacheState: '',
    statusText: '',
    headersList: HeadersList {
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    },
    urlList: [],
    body: { stream: undefined, source: 'null', length: 4 }
  },
  [Symbol(headers)]: HeadersList {
    [Symbol(headers map)]: Map(2) {
      'content-type' => 'application/json; charset=utf-8',
      'etag' => '"yixsn2"'
    },
    [Symbol(headers map sorted)]: null
  }
}

[eltigerchino]

Hi Michael,
When calling resolve(event), SvelteKit searches your project for the specified route.
If you do not have a /some/path/+server.js file with an exported OPTIONS() method, Kit, rightly responds that the method is not allowed.

If you want a catch-all OPTIONS handler, you'll need to add something like this to your hooks: #5193 (comment)
Note the logic to identify the request method, then return a response, all while skipping resolve(event). We only want to call resolve(event) when we want to Kit to find that route in our project.

PS: Next time it would be really helpful if you provided a link to a github repository or stackblitz workspace that reproduces the issue in a sveltekit project.

[michaelusantiago]

Thanks!
I was able to resolved it.