Troubleshooting CORS Problem with AWS CloudFront Signed Cookies

I encountered an issue while implementing cloudfront signed cookies.

When trying to access '' from '', the CORS policy blocked it due to absence of the 'Access-Control-Allow-Origin' header.

This problem arose after restricting viewer access (using Signed cookie) for the cloudfront distribution on Domain 1(a.xyz.com) when requested from Domain 2(b.xyz.com).

The S3 CORS configuration for the bucket containing assets from domain 1 is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

I have attempted adding whitelist headers in the cloudfront behavior settings, such as :

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

However, the error persists despite these adjustments.

Note: Opening the file in a new tab works fine, with signed cookies generated successfully.

How can this issue be resolved?

Answer №1

If you want to enable CORS with cookies, make sure to include the Access-Control-Allow-Credentials header.

To learn more about this header, visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

Additionally, ensure that the Access-Control-Allow-Origin header is not set to *, and XHR requests should be sent with the withCredentials option.

For more information on sending XHR requests with credentials, check out: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Detecting collisions in Three.js

I seem to be overlooking something quite fundamental, as I can't seem to find a solution in the documentation or any other working code examples. I am currently creating a basic museum using THREE.js libraries. While most of it is set up, I need to im ...

Is it possible for an Ajax/jQuery script to display multiple dependent dropdown box options within a single Form URL?

In the process of developing a basic form prototype that includes 4 entries in PythonAnywhere (Python 3.7 + Django): PinID (Independent, simple manual number entry) Region (Independent Dropdown Box) Name (Region-Dependent Dropdown Box) Source (Name-Depen ...

Check for support of Symbol.toStringTag in JavaScript

Can this function reliably detect the presence of @@toStringTag in all environments? function hasToStringTagSymbol() { if (Symbol && (typeof Symbol() == "symbol") && !!Symbol.toStringTag) { var xTest = function () { }; xTest.prototyp ...

Utilizing cross-domain AJAX for JSON requests

I'm currently on the website site.com attempting to retrieve some JSON data from my node.js server running on port 8080. Encountered this particular error message: XMLHttpRequest cannot load http://site.com:8080/json/1. Origin http://site.com is not ...

Execute a sorted operation with proper authorization

Recently, I developed a NextJs dashboard that enables Discord users to connect to their accounts. One of the main features is retrieving the user's guilds and filtering them to include only the ones where the user has either the MANAGE_GUILD permissio ...

Unable to successfully retrieve the output from a function within an AJAX request

Hey, I'm having trouble getting the value from this function. It keeps returning undefined and I can't figure out why. Here's the code snippet: function getData() { axios.get('/task') .then(response => { ...

Learn the process of dynamically wrapping component content with HTML tags in Vue.js

Hey there! I'm looking to enclose the content of a component with a specific HTML tag, let's say button for this scenario. I have a function that dynamically returns a value which I use as a prop. Based on that, I want to wrap the component&apos ...

Is there a way to incorporate the 'window' into middleware when using Express?

I am using middleware to retrieve data from a cookie with the help of vue-cookies. try { if (window.$cookies.get('region')) { res.setHeader('Set-Cookie', [ `region=${window.$cookies.get('region')};pat ...

Create your masterpiece on a rotated canvas

My goal is to draw on a canvas using the mouse, even after rotating and scaling the canvas container. The issue I am facing is that the mouse coordinates get affected by the rotation and scaling, making it difficult to draw correctly. I have tried switch ...

Error encountered in React V16.7: The function is not valid and cannot be executed

import React, { useContext } from 'react'; The useContext function is returning undefined. Error Details: Uncaught (in promise) TypeError: Object(...) is not a function Error occurred when processing: const context = useContext(UserCon ...

Tips for creating a useState variable within the render() function in reactjs

I'm completely new to reactjs, and I've been trying to define useState variables within the render() method of a reactjs component. However, I keep running into an error: "Invalid hook call." class ProductDefinition extends Component { construc ...

Can you provide me with the URL for the jQuery post function?

Could someone please clarify which URL I should use in the $.post call to the server for a node.js file? Most tutorials demonstrate with PHP files, but I'm unsure about calling node.js files. Should I post it to the app.js file or the route file? Thi ...

Jade iterates over each object element, assigning its children to their respective parent elements

I have a JavaScript Object named "boards". [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"}, {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}, {"id":3,"parent_board":1,"title":"Lorem 1-1"," ...

Deployment failure of AWS CDK caused by Error: Lambda Function Invalid

I'm in the process of integrating a Lambda authorizer into my REST API using AWS CDK. const api = new apigw.RestApi(this, 'apiname', { defaultCorsPreflightOptions: { allowOrigins: apigw.Cors.ALL_ORIGINS } }); const authorizerFuncti ...

The xmlhttp object parameter is not defined. JavaScript AJAX

As a newcomer to javascript and ajax, I am trying my best to understand it all. I followed a tutorial to write this code, but I can't seem to figure out what I did wrong. If you click here, you can see the live version. The error message that Firebug ...

Having trouble transitioning from Curl to Axios in Node.js? Encountering issues when trying to make a curl request using the provided certificates, resulting in ECONNRESET or

I've been struggling to make a successful curl request in Axios (Node.js) without any luck. A typical working curl request I use (can't provide exact details as the API is private) is like this: curl --cacert server.pem --cert client.pem:123pas ...

What could be causing the constant undefined response when using ajax to post to php?

I have been using a mouseover event on a span element to trigger an ajax post call to a php page. However, I keep getting undefined values - first for responseText when using a simple echo to get the response, and now with responseXML. Can someone please h ...

How can we dynamically navigate to the next line within the Material UI DataGrid component when space is limited?

Currently, I am working with the datagrid component from material ui. I have retrieved some data from a database and am attempting to pass it to the datagrid component. However, I have noticed that certain fields contain long strings which do not fully app ...

Determine in AngularJS whether there is a checked checkbox in a table row

Here is my HTML code snippet: <tbody ng-repeat="notification in notifications"> <tr> <td rowspan="{{notification.specs.length+1}}">{{notification.notification_id}}</td> </tr> <tr ng-repeat="position in ...

Attempting to transfer elements from an iteration into a separate array

Currently, I am attempting to insert an associative array into an object that is empty. However, I keep encountering the following error message: An undefined property '#<Object>' cannot be read Here is the code snippet that I am testing: ...