CORS error

[TimHei123]

I am receving a CORS error when trying to send files to s3.

what have I done? I have made an api gateway connected to a lambda function to store documents in s3 and send a link to that bucket so that I can send the files via chat.

what is the intended result? the intended result is that the file I upload should be converted to base64string which works as intended. it should then be sent via the url to the api in following manner: /chatuploads/{base64data} . the api should return the path of the s3 bucket and it should be printed to the console for further processing.

this is the code that make the api call:`const handleUpload = async () => { // Check if a file is selected before proceeding if (!selectedFile) { console.error("No file selected"); return; }

function getBase64(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });
}

// Convert the selected file to Base64
const base64Data = await getBase64(selectedFile);

// Extract the file name from the selectedFile object
const fileName = selectedFile.name;

// Prepare the fileData string according to your backend's expectations
const fileData = "S3" + fileName + "!" + base64Data.split(',')[1];

try {
    // Send the fileData to your backend
    const Data = encodeURIComponent(fileData);
    console.log("Data ", Data)
    const response = await fetch(`https://rfzmb9ibkk.execute-api.eu-north-1.amazonaws.com/chatuploads/${Data}`);

    if (!response.ok) {
        throw new Error(`HTTP error status: ${response.status}`);
    }

    const responseData = await response.json(); // Assuming the response is JSON
    console.log(responseData); // Handle the response data as needed

} catch (err) {
    console.error(err);
}

};`

what is the actual result? the actual result is Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rfzmb9ibkk.execute-api.eu-north-1.amazonaws.com/chatuploads/S3stripe-icon.png!iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAkFBMVEVjW%2F%2F%2F%2F%2F9hWf97dP9fV%2F9bUv9dVf9ZUP9XTv%2F9%2Ff%2F4%2BP%2F7%2B%2F9lXf%2Ft7P%2Bhnf%2BHgf90bf%2Fz8v%2BSjf%2Fi4f%2Fo5%2F%2BAev%2BXkv%2Bemv%2BPiv%2Ff3f%2B9uv%2B3tP%2Fw7%2F%2BkoP%2Balf92b%2F%2Btqf9qYv%2FY1v%2FPzf%2FHxf%2FMyv%2B8uf%2B0sP%2BKhP%2Fa2P%2FKx%2F9uZ%2F9USv%2FDwP%2Bvq%2F%2BDff8reVufAAAFzElEQVR4nO2diXaqPBCAccyCCIIL4gaKWjdc3v%2FtfrHX1tvfaoB4nNwz3wP05GvIZJJMomURBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBPEaABgTVxhjAO9ukTbOakLathWEg04%2FasWtKOkP%2FHrg2rbkwnTTs52EwI9GW2%2FSdhq1K42m47S94W6d%2BFNXcmM1QbBsc%2BhOao9o9xazUwacvbu1hQFhi3jrPLT7ojkc%2BbYtTOpJ4CKaq9l9MY%2BDvSmSwNPZ42%2FzPo1uPJXi3a1XQKTHMn4X2vMO%2Bm4E2emV9buAPbDytOj4M8sQZKIYPg01BDhU9cNtCKzqF4rckMFQgyBiQ5Z5OgTxGoKrpQfxGgJf6BFEa8jXmgSxGopQlyBSQ0irZWr4DflImyBOQ1avnKshN7SX%2BgRRGjJ9YQapodTZhRgNQTaet9toQ5HoFERoCGz7rxtmzX%2FckA20CiI0lAV2LhpnjDME1lWz645mHT8MT5tBMhsvt21zDAOV7V9nLPbycnDI8nNELu29rEeH4Z0hjM6QhQqBZjiV%2F2s3MMEh9dfDH72JzlB0ngt6wS%2BnEQCMs2nycSuJzzB%2BbhjxB38AQNhp8r0Hgs6Qj58KNp42%2BiwJcRer4fPFb1flWBCECBdNjIYKC4ut2pngeUzWDw5Cw%2Be7iD3lo10m60sXm6GtsE%2BaqjeacWyCltw9NzzId7eyCkppad9kRYXZ4py09f%2Bf0xiDaCkY1mpjbkKRxV1Ul4de36ySoG9YqLob3IstyQyULHJk0R6HCGeDpyhM%2Bd80h3HGTPtaVRYXtzTmkTBrSEJWzDBnEbkGSZarMXEWfdeYuFN2z9tbhWBIR9q%2F7ps9Y5iYEVv5rKzheQJZpzb%2BCmjglU7xP6YSvaPKftsDnFGAPjHnFWsS22MXeWIOVtVqk8nGxt2NLKtcjfGBvBvFqfIpoufj3gmQncq92EhwJwByUL1s6Ih7%2FufT6iW0Y%2FvdFg9honqN6Qi3Ioio9G2ZK61H51TvB3hQuRtPyFM4ZielVxqfeOgOLn4i7Fa1iLPD%2FZ1a%2BWh040rDcYA7uckBnsUVEtUu7lnxE%2BCiU%2F6KUIK%2FE638W90H45IDsrt%2Fd%2BsVAc5Oi1KRNUQ%2BY3wDjAeR6o3uG5bow%2BkNIGS4Lvq14p8T%2F4ZxuSm4zeEb85leYdKOipQSr0z6TP8AgoUfyvsAQwMN87Ajww%2FFsn4vM2sgfsHkRi3XaZgzX%2FxE7NVizsBYQwtspVOO2IjE7T7AVwqGY0yhBgr%2Bu5VqGzAVikEwK%2FiujMpp3BKRIavX2i1RZEmncvK%2FQLTndjas1XotV90RQMEQVx%2FmeLNM9TkrcI37Sj9pHwKuNCDZ9LnhCFEs%2FTI8s20xhToZlUizRmpYqzWXHUs%2BlgRXYbaYIZrx%2FzY8M1kOsrPkb5YgVS7vdzAbnvEWranLxb3II5hKUXETU%2BZ9zzCnt2tNr68%2FXjr08kbkfqN0mQ%2FV6uk3wwvd5bi1CVKL7%2FeSZX68VNx662IqeXtoeKHpfNJUv9U%2BQjQdKhiWYINoGL7E0Clwy%2Bb1vMJwjmiueI0hptnwJYYOoqWT9RLDFaZI%2BgrDRoApzrzCEFvZkHbDCaaMLUe7YYxoaXhBt%2BEcU0p6QbOhk2JK2C5oNkRYTKPX8IhrKryg1XCFsVhIp%2BEBZRm0RsMjzosl2gwbMU5BbYaTDsIgc0GT4SLDlsp8AUHFouAcJ8J8KQjEYF7twoyzQn4jCISoH3ulH8B0dnWMs%2BAPGGf%2B2Csj2V7VDbhEmgOMy9O66Lvsw9jFf4H0BsZtPrj7kN49nHlsGXQr%2FwoIDpl%2FnHcfBtiGNxxvUuOej7iSP6Qn3akfrXfdSdtxbrq06bQnvcW6f8qENPaXuv6QH6VxafM0CDedJIniOEo6A7%2Beir2dH7i9u336%2BPGbeWB4xxEEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEav4DJRlZ%2BBCLXEYAAAAASUVORK5CYII%3D. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

wierd fact: if I just give the file name, for example test.png, and not a base64 string in the url, then I get error code 500 because the api is expecting a base64 string and not text.

how to reproduce this result:

pull Brach to your local machine. run npm install run amplify pull --appId d2j290dx5bs7ht --envName acceptance run npm run start:frontend go to the login page at /nl/login login using the email timon.heidenreich@icloud.com and the password is Longpass next go to the chat page at /nl/homeowner-dashboard/chat click on the chat with the name timon.heidenreich click on the paperclip and in the menu click on the first button which looks like a folder choose any image or file you want from your computer. click on the upload button just under the folder icon now open your console and you should see the error.

[stefanhopman1]

https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/cors.html

[OmkumarMangukiya]

Try this const cors = require('cors');

app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); // Allow requests from your frontend res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // Allow specific HTTP methods res.header('Access-Control-Allow-Headers', 'Content-Type'); // Allow specific headers next(); }); cors is a security feature used by browser this will just disable it.