Not able to post data to advancedio function api from browser , showing CORS issue

Not able to post data to advancedio function api from browser , showing CORS issue

  1. const express = require('express');
    const catalyst = require('zcatalyst-sdk-node');
    const cors = require('cors');
    const app = express();
    app.use(cors({
    origin:"*",
    credentials:true
    }));
    app.use(express.json());


    app.post("/test", (req,res) => {
    const catalystApp = catalyst.initialize(req);
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    const body=req.body;
    const param=req.query;
    console.log(body);
    console.log(param);

    res.status(200).send(JSON.stringify({"req.body": req.body,"message":"test","req.query":req.query,"req":req.method}));
    });

    module.exports = app;
this is the code used in the advancedio function, which is basically returning the passed post data to just test if post data is being received in request.

I am testing this api from a local html file shown below
  1. <script>
    url = "< my-function-url >"; // consider this as my advance function function url
    const payload = {
    "name": "test",
    "phone":"9999",
    "email":"test@test.com"
    };
    console.log('sending',payload);
    fetch(url + '/test?a=abc', {
    method: 'POST',
    headers: new Headers({
    "Accept": "application/json",
    "Content-Type": "application/json"
    }),
    body: payload
    })
    .then(response => response.json())
    .then(data => {
    console.log('Success:', data);
    })
    .catch((error) => {
    console.log('Error:', error);
    });
    </script>

and after running this  js code in browser to call the function-url-api, 
this is the error I am receiving
 

it says
Access to fetch at '{{my-function-url}}' from origin 'http://127.0.0.1:5500' 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.
test.html:57          POST {{my-function-url}}  net::ERR_FAILED
Error: TypeError: Failed to fetch at test.html:57:3


Need help with the server or client code, what needs to be changed or is there any other setting in catalyst from where we need to enable the CORS, 

The notable thing is : if header is not passed, then the api works but POST data is not received at server. and receive the body as blank
ie
if header's content-type is commented

then the api is executed but the POST Data ie req body is not received at server, the output received in browser console is this.


Any help / Guidance would be greatly appreciated.
Jayesh Sonawane

    • Announcements

    • Important Announcements in Support for Catalyst Features

      Hello Catalyst Users, This announcement is to bring to your notice some of the recent updates in our support for various Catalyst components, to ensure that your existing Catalyst applications function properly. You can continue to build robust applications

    • Introducing Catalyst 2.0, the simplest cloud-based pro-code development platform.

      Dear Catalyst Community, We are beyond thrilled to present you Catalyst 2.0—the new-age, pro-code development platform that redefines the way you build, deploy, and scale apps. Catalyst 2.0 is not a mere upgrade, but a significant leap into the future

    • Set budgets to optionally disable your Catalyst production environment

      Hello all,    We are pleased to inform you that you can now configure the automatic disabling of a project's production environment upon reaching a specified budget's threshold. Budget alerts in Catalyst facilitate setting usage limits in amounts or Catalyst

    • #CatalystServerless Hackathon 2022

      We are pleased to announce #CatalystServerless Hackathon with prizes worth $5000 up for grabs. Create a working prototype aimed to solve a critical business issue using Catalyst and stand a chance to win exciting prizes. The Hackathon will happen in 3

    • Share your interest to participate in the #CatalystServerless Blogathon

      Hi, we are working on announcing the next edition of the #CatalystServerless Blogathon. Please fill up this form to stay posted on all updates related to the Blogathon. https://zfrmz.com/JN9ChxPU9JQpPgB1vRp8

      Catalyst Community