CORS policy issue

[enggsatyamraj]

This error is coming, whenever i try to call api.
Access to fetch at 'https://us-central1-delhimetroapi.cloudfunctions.net/route-get?from=Dwarka&to=Palam' from origin 'http://172.1.1.0:5000' has been blocked by CORS policy: 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.

so please add the appropriate CORS headers to allow requests from my domain

[mudassir-jmi]

Adding Correct CORS Headers

The error happens because the API endpoint at https://us-central1-delhimetroapi.cloudfunctions.net/route-get does not add the appropriate Access-Control-Allow-Origin header, which will allow requests coming from the origin http://172.1.1.0:5000. To fix this problem, do the following steps:

1. Update Cloud Function to Include CORS

If you have access to the code for the Cloud Function, you need to explicitly allow cross-origin requests by including the appropriate CORS headers in the response.

Here's an example:

const functions = require("firebase-functions");

exports.routeGet = functions.https.onRequest((req, res) => {
  // Add CORS headers
  res.set("Access-Control-Allow-Origin", "http://172.1.1.0:5000"); // Replace with your allowed origin
  res.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  res.set("Access-Control-Allow-Headers", "Content-Type");

  // Handle OPTIONS preflight requests
if (req.method === "OPTIONS") {
    return res.status(204).send();
  }

  // Your API logic here
  const from = req.query.from;
  const to = req.query.to;

  // Mock response
  res.json({
    from: from,
    to: to,
    status: "Success",
  });
});

2. Test the API

Once the headers are added, deploy the updated Cloud Function and test it by making a request from your origin (http://172.1.1.0:5000).

3. Allow Multiple Origins (Optional)

If you need to allow requests from multiple origins, you can modify the header dynamically:

const allowedOrigins = ["http://172.1.1.0:5000", "http://example.com"];
const origin = req.headers.origin;

if (allowedOrigins.includes(origin)) {
  res.set("Access-Control-Allow-Origin", origin);
}

Using Express.js Example:

const express = require("express");
const fetch = require("node-fetch");
const app = express();

app.get("/proxy", async (req, res) => {
  const { from, to } = req.query;
  const apiUrl = `https://us-central1-delhimetroapi.cloudfunctions.net/route-get?from=${from}&to=${to}`;

  try
const response = await fetch(apiUrl);
    const data = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: "Unable to fetch data" });
  }
});

app.listen(5000, () => console.log("Proxy server running on port 5000"));