Lightweight way of sending data to meteor without CORS issues

help
1

Hi, Im trying to make a js form widget that can be embedded onto any website with an iframe and with meteor as the backend. Basically its an iframe that sends form data to my meteor server. I’ll only need the meteor backend to verify if the user’s key matches the backend key I set, and to receive the form data sent from the user.

My current code on the client (in the iframe) to do this is:

  const checkKey = {
    currentUrl: www.userswebsite.com,
    user_key: '1234'
  };

  const keyCheckToSendString = JSON.stringify(checkKey);

  const xhr = new XMLHttpRequest();

  xhr.open("POST", 'http://localhost:3000/send');
  xhr.setRequestHeader("Content-type", "application/json");

  xhr.send(keyCheckToSendString);

Upon research I thought CORS would not be in affect as i created this inside an iframe and appended it to the document, but looks like it doesn’t matter and I still get CORS issues.

My server code (meteor) is:

import { WebApp } from 'meteor/webapp';
import bodyParser from 'body-parser';
import HTTP from 'http';

WebApp.connectHandlers.use('/send', bodyParser.json());

WebApp.connectHandlers.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
  
    console.log(req.body)

    res.writeHead(200);
    res.end(JSON.stringify({ status: 'ok' }));
});

As you can see I had to add many unsafe cors headers as a temporary bypass

Is there a lightweight (for the client) way of avoiding the CORS issue and sending data from one website to a meteor server hosted somewhere else? Maybe using Webapp is not efficient, but ill only really be doing 2 things like I said above (confirming key and sending form data)? Or maybe even a way of calling meteor methods from a different website (lightweight)?

Ive really hit a dead end

2

Add those CORS headers to just the public API endpoints and make sure to validate data (which you should do anyway)

Using Access-Control-Allow-Origin: * is the correct way of telling the world that you accept data from any origin on that endpoint

1 Like