Express.js Access to Fetch from Origin Blocked by CORS Policy

Question

I am posting data from a simple html form to an Express.js endpoint. When I post the data, I received the following error:

"Access to fetch at 'https://samplesite.net/sample' from origin 'https://samplesite.com' 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."

Here's the form code:


       
         
          
             
             {{ 'templates.email_newsletter.form.first_name' | t }} *
          
        
          
             
             {{ 'templates.email_newsletter.form.last_name' | t }} *
          
        
          
             
             {{ 'templates.email_newsletter.form.email' | t }} *
          
         
          
             
             {{ 'templates.email_newsletter.form.zip' | t }} *
          
       
    
       
          
          {{ 'templates.email_newsletter.form.dob' | t }} *
       
    
       
          
          
          Yes, I consent...yadda yadda

Fetch Code

const formEmailList = document.getElementById('form-email-list');

formEmailList.addEventListener('submit', function(event) {

    event.preventDefault();

    let formEmailListURL = "https://samplesite.net/sample";
    let fieldFirstName = document.getElementById('form-email-firstname').value;
    let fieldLastName = document.getElementById('form-email-lastname').value;
    let fieldEmail = document.getElementById('form-email-email').value;
    let fieldZip = document.getElementById('form-email-zip').value;
    let fieldDOB = document.getElementById('form-email-dob').value;
    let fieldOptIn = document.getElementById('form-email-optin').value;

    let emailListData = {
        abi_first_name: fieldFirstName,
        abi_last_name: fieldLastName,
        abi_email: fieldEmail,
        abi_zipcode: fieldZip,
        abi_dateofbirth: fieldDOB,
        abi_emailoptin: fieldOptIn
    }

    console.log('Posting Form...');

    fetch(formEmailListURL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(emailListData),
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Server returned ' + response.status);
            }
            return response.json();
        })
        .then(function(data) {
            console.log('Added to List:', data);
        })
        .catch(error => {
            console.error('There was a problem:', error);
        });
});

Here's the Express App Code

const express = require("express");
    const helmet = require("helmet");
    const cors = require("cors");
    const app = express();
    const port = process.env.PORT || 1337;
    const corsOptions = {
        origin: 'https://samplesite.com',
        optionsSuccessStatus: 200
    }
    
    // Secure Headers
    app.use(helmet());
    
    // parse json request body
    app.use(express.json());
    
    // parse urlencoded request body
    app.use(express.urlencoded({
        extended: true
    }));
    
    // Create Asset Dir
    app.use(express.static(__dirname + "/public"));
    
    // Sample Route
    app.options("/sample", cors(corsOptions));
    app.post("/sample", cors(corsOptions), (req, res, next) => {
    
        const postToEmailList = async () => {
            try {
                const fetch = require('node-fetch');
                const FormData = require('form-data');
                const form = new FormData();
                form.append("targetType", "dataExtension");
                form.append("attributes", `{"campaign":"test","email":"${req.body.email}","test_id":"${req.body.email}","dateofbirth":"${req.body.dateofbirth}","first_name":"${req.body.first_name}","last_name":"${req.body.last_name}","zipcode":"${req.body.zipcode}","tcpp":"yes","emailoptin":"${req.body.emailoptin}"}`);
                form.append("withTriggeredSend", "");
                form.append("isJourneyBuilderIntegrated", "false");
                const res = await fetch("https://test.com", {
                    method: "POST",
                    mode: 'cors',
                    body: form
                });
                const data = await res.text();
                console.log(' data', data);
            } catch (error) {
                console.log(" error");
                console.log(error);
            }
        }
    });
    
    app.get("*", function(req, res, next) {
        let err = new Error("Page Doesn't Exist");
        err.statusCode = 404;
        next(err);
    });
    
    app.listen(port, (err) => {
        if (err) {
            return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
    });
    
    module.exports = app;

Express.js Access to Fetch from Origin Blocked by CORS Policy

Answers (1)

Related Questions