Access-Control-Allow-Methods does not allow the use of Method PUT in the preflight response, as stated by Firebase Cloud Functions

I am facing an issue with my Firebase cloud function endpoint. I have a setup where it forwards PUT requests to another API endpoint. I have configured the following Access-Control-Allow- headers:

// src/middlewares/enableCORS.ts
export default function enableCORS(
  fn: (req: https.Request, res: e.Response) => Promise<void>
) {
  return async (req: https.Request, res: e.Response) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', '*');
    res.header(
      'Access-Control-Allow-Methods',
      'GET, POST, PUT, DELETE, OPTIONS'
    );
    res.header('Access-Control-Max-Age', '86400');

    if (req.method === 'OPTIONS') {
      res.end();
      return;
    }

    await fn(req, res);
  };
}
// src/index.ts
import enableCORS from './middlewares/enableCORS'

export const my_endpoint = https.onRequest(
  enableCORS(async (request, response) => {
    // Forward request
  })
);

Despite setting up CORS headers, my browser requests are still being blocked. Can anyone offer assistance?

Answer №1

Providing the solution:

To address this issue, I utilized esbuild to consolidate individual files into a unified index.js file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with TypeScript: Declaring type for objects in an array using .map

I'm having trouble assigning types to the Item object that is being returned from unitedStates.map((item: Item) => {}. Despite my efforts, I am unable to correctly define the types. Although I have specified the unitedStates array of objects as un ...

Tips on transforming Angular 2/4 Reactive Forms custom validation Promise code into Observable design?

After a delay of 1500ms, this snippet for custom validation in reactive forms adds emailIsTaken: true to the errors object of the emailAddress formControl when the user inputs [email protected]. https://i.stack.imgur.com/4oZ6w.png takenEmailAddress( ...

Tips for resolving SyntaxError: Unable to utilize import when integrating Magic with NextJS in a Typescript configuration

Looking to integrate Magic into NextJS using TypeScript. Following a guide that uses JavaScript instead of TypeScript: https://github.com/magiclabs/example-nextjs Encountering an issue when trying to import Magic as shown below: import { Magic } from &qu ...

Creating variables in Typescript

I'm puzzled by the variable declaration within an Angular component and I'd like to understand why we declare it in the following way: export class AppComponent { serverElements = []; newServerName = ''; newServerContent = &apos ...

Automatically identifying cloud functions ready for deployment with the gcloud command line interface

When utilizing Firebase tools, the deployment process is streamlined with auto-detection of available functions by issuing the command: firebase deploy --only functions However, for more extensive control over environment variables and VPC connectors, we ...

What is the process for adjusting the body parser limit in Firebase?

I'm attempting to proxy a file upload to Firebase cloud functions in order to prevent exposing our API url. It appears that Firebase utilizes Body-parser internally to parse the body of requests, but it is limited to 100kb by default. I've expe ...

What is the best way to retrieve a value from a basic jsdom function?

Working with jsdom and jQuery has been smooth sailing for me so far. However, in an effort to avoid repetitive code, I decided to create a function that takes HTML input, uses jQuery to manipulate it, and returns the modified result. Unfortunately, I ran i ...

Undefined error encountered in Node.js - ERR variable not defined

I'm currently working on a basic food ordering CRUD app using node js, express js, and MySQL. However, I am facing an issue when trying to create a new order. Since I am relatively new to node js, can someone please provide guidance or advice on how t ...

Angular2 and Express: The Dynamic Duo

I am encountering an issue with my Angular2 app that is using Express. The problem arises when I have a URL like /v2/tickets?filterId=321 and upon page reload, it changes to /v2/tickets/?filterId=321, disrupting the Angular2 routing process. Upon checkin ...

Express does not handle get requests to .html files

const express = require('express'); const app = express(); const port = 3000; const bodyPar=require('body-parser'); const session = require('express-session'); const path=require('path'); var user=["Jared","Bill","Ja ...

Tips for transferring data to an entry component in Angular 2 using ng-bootstrap modal

I've been grappling with sending data to a custom modal content component in Angular 2. My objective is to have the flexibility of calling this modal from any other component without duplicating code. Despite my efforts, including referencing the "Com ...

What is the way to send custom properties to TypeScript in combination with StyledComponents?

Encountering an error while attempting to implement Styled Components 3 with TypeScript: TS2365: Operator '<' cannot be applied to types 'ThemedStyledFunction<{}, any, DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, ...

What is the best way to redirect to the login page using the PUT method in express.js when the user is not authenticated?

I am encountering an issue where I need to update a database from an AngularJS page using the $http.put method. However, if the session expires, it displays errors on the server. When the put method is triggered, it goes to this route: PUT /api/categorie ...

Middleware caching for faster responses

I have been working on incorporating caching into my project using express middleware, and it seems to be functioning well. However, I've encountered an issue with an endless loop. Within my router, I have the following route: router.get('/test ...

Accessing the state from a child functional component and then adding it to an array of objects in the parent component

I'm facing a challenge with a parent component that needs to manage the data of its child components stored in an array of objects. My goal is to add new child components and maintain their information within the parent's state as an array of obj ...

Unsure about the best method for limiting routes within the meanjs framework

I am fairly new to using the MEAN stack for development. The app I am currently working on was scaffolded out using meanjs and yeoman. My goal is to have both regular users and administrators in the system, with admins being able to manage all users (crea ...

(Enclosing the route path with parentheses)

While working on a project with kraken and express, I came across this interesting piece of code: module.exports = function (router) { router.get('(/)', .....); router.get('(/nfc/read)', .....); } I couldn't help but wond ...

Revamping the static method signature of a class in Typescript

One of the modules I'm using is called some-module and it defines a class like this: export declare class Some<T> { ... static create<T>(): Some<T>; map<U>(x: U): Some<U>; } export default Some In my project, I ...

The SunEditor onChange event does not reflect updated state information

software version next: 12.0.7 suneditor: 2.41.3 suneditor-react: 3.3.1 const SunEditor = dynamic(() => import("suneditor-react"), { ssr: false, }); import "suneditor/dist/css/suneditor.min.css"; // Import Sun Editor's CSS Fi ...

Exploring Nested Data in MERN Stack Frontend Development

Here is the structure of my model: coverPhoto: { type: String, required: true, }, images: [{ type: String }], location: { address: { type: String, required: true }, city: { type: String, required: true }, postalCode: { type: Number, required: ...