Issue Using Custom Headers With TypeScript

Created on 9 November 2023, about 1 year ago
Updated 4 December 2023, about 1 year ago

Problem/Motivation

When porting our readme example to this code sandbox: https://codesandbox.io/s/drupal-api-client-json-api-client-configuration...

I noticed that using a custom header threw a type error. There seems to be a type guard restricting things to known http headers. I'm not positive that this is an us problem, but wanted to capture it in case. This is a use case in the decoupled kit starter kits.

Steps to reproduce

Proposed resolution

If we can't fix this ourselves, we might need to update the example in the readme so folks don't run into this.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Closed: works as designed

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States brianperry

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @brianperry
  • Status changed to Closed: works as designed about 1 year ago
  • I can reproduce this with a codesandbox but I see a better error message when trying this locally with the example:

    Access to fetch at 'https://dev-drupal-api-client-poc.pantheonsite.io/es/jsonapi/node/recipe...' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

    Looks like setting a custom header breaks the CORS? This one is beyond me a bit but I think the setting a custom header itself is working and this is a config issue one way or another. I'm going to mark this as closed.

    This does highlight to me that we need better error handling throughout.

Production build 0.71.5 2024