Tips for correctly implementing CORS (Cross-Origin Resource Sharing)

Is there a way to securely access a resource from a third-party domain using XML HTTP Requests (XHR, AJAX)?

I have set up CORS on both the target and origin sides with the following configuration:

Access-Control-Allow-Origin: http://www.example.com, https://www.example.com, http://www.example.org, https://www.example.org
Access-Control-Allow-Methods: GET, POST, HEAD, OPTIONS

However, browsers like Chrome, Firefox, and Internet Explorer are blocking the XHR request to when initiated from http://www.example.com/bar.

The most detailed error message is provided by Firefox:

XMLHttpRequest cannot load . The 'Access-Control-Allow-Origin' header contains multiple values 'http://www.example.com, https://www.example.com, , ', but only one is allowed. Origin 'http://www.example.com' is therefore not allowed access.

This error seems quite perplexing, almost like being told "Hey, you're A and want to talk to B, but B only accepts A and B. So sorry, no communication allowed." How can we correctly implement CORS (Access-Control-Allow-Origin) in this scenario?

javascriptajaxxmlhttprequestcorsaccess-control

Answer №1

Access-Control-Allow-Origin will only accept either * or a single origin.

If you wish to allow multiple origins while restricting some, you need to:

  1. Examine the the Origin request header
  2. Verify if it is included in your approved list of origins
  3. Add it to the Access-Control-Allow-Origin response header

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

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

javascriptcssangularjscanvasd3.js

What is the reason behind combining all states into a single location in Redux, even if they are not globally accessible?

As a newcomer to React and Redux, I have found them to be quite enjoyable when used together in a small sandbox application. However, as I consider larger applications, I can't help but question why Redux stores the entire application state in a singl ...

javascriptreactjsredux

Uploading files with AJAX form in MVC3 leads to empty Request.Files

Currently, I am utilizing MVC3 and attempting to develop multiple ajax forms that each have the capability to upload a file within a single page. Below is the layout of the page: @{ ViewBag.Title = "Index"; } <h2> Index</h2> @Html ...

ajaxasp.net-mvcasp.net-mvc-3uploading

Creating an automated sequence of $http requests to sequentially retrieve JSON files with numbered filenames in Angular 1.2

I have a series of JSON files (page1.json, page2.json, etc.) that store the layout details for our website pages. Initially, I would load each page's data as needed and everything was functioning smoothly. However, it is now necessary for all page da ...

javascriptangularjsjsonfactory

Utilize an array with dynamic referencing

I am attempting to reference a single index out of 30 different indices based on the user's actions, and then utilize ng-repeat to iterate through each item in the index. Controller: $scope.meals = [ { title: 'Abs', url:"#/app/mworkout ...

javascripthtmlangularjsionic-framework

Why does socket.io have trouble connecting when clients are using different IP addresses on separate wifi networks?

I've encountered an issue where socket.io won't connect when clients are on different wifi networks (ip address) using my self-configured Ubuntu Nginx server. Strangely enough, it works perfectly fine on a pre-configured Heroku server. Here is a ...

javascriptnode.jsnginxsocket.iomultiplayer

Unable to save the session identifier from the response headers while utilizing sessions in react/frappe framework

I am attempting to retrieve the session id (sid) from the response headers in a unique scenario. My client application is situated on a local environment, while my API is hosted on an ERP Next server. Upon sending a login request from the React app, I am ...

javascriptreactjserpnextfrappe

Using the fieldset element in AngularJS Material causes disruptions in my flex layout

My current issue can be illustrated through two code examples: The first example functions properly when the fieldset is not included. In the second example, including the fieldset causes the layout to extend beyond the window when there is long text (in ...

javascriptcssangularjsflexboxangularjs-material

Issues with the functionality of the map method in Javascript arrays

I have integrated Laravel and Vue.js to develop a chat application. To secure my response in Laravel, I implemented encryption to prevent unauthorized access from the console: public function get() { $contacts = User::where('id', '!=&ap ...

javascriptlaravelvue.js

When utilizing :id with Vue, HTML attributes become hidden from view

I am facing an issue where I need to make HTML elements visible, but they appear invisible upon rendering. Below is my HTML code: <div class="created-links-wrapper" v-for="item in createdUrls" :key="item._id"> <d ...

javascriptvue.js

Retrieve targeted information array using jquery

Having an issue with JQuery, my PHP code looks like this: if($record2==0) { if($tmp_curr==$curr) { $reqvendor->inserttmp($json); $json[] = array('stat' => true, 'msg' => ''); //$app['data'] = true; //var_du ...

javascriptphpjqueryjson

How to monitor and respond to HTML modifications in a child component from a parent component in Angular framework

In the setup I have, there is a main component known as @Component({ selector: 'parent-comp' template: '<child-comp [inputData]="responseData"></child-comp> }) export class ChildComponent { public responseData: any; ...

javascriptangularangular2-templateangular2-forms

Issue with Bootstrap 3 dropdown not receiving updates

My goal is to dynamically populate a bootstrap 3 dropdown menu from a MySQL database. Everything works perfectly the first time I load the data. However, when I add more rows to the database, they do not automatically show up in the dropdown. Only after ...

javascriptphpjquerymysqltwitter-bootstrap

Traverse an array in JavaScript using jQuery, PHP, and AJAX

Trying to iterate through a JavaScript object using AJAX has led me to explore options like json_decode, but it turns out this is an array and not an object. var array = [{type: 'a', value: 1}, {type: 'b', value: 1}] $.ajax{ url: "p ...

javascriptphpjqueryajax

Activate inactive html button using javascript

One of the challenges I am facing is testing forms where the client specifically requested that the submit button be disabled by default. I have been exploring ways to dynamically replace the disabled="" attribute with enabled using JavaScript within a s ...

javascripthtml

Dynamic addition of modules to my Angular application is a must

Is there a way to dynamically load modules in my Angular application based on user selection after they have logged in? ...

javascriptangularjsangularjs-module

Show pagination control only when there are multiple pages in AngularJS using ui-bootstrap

Currently, I am working with ui-bootstrap pagination and facing an issue where the pagination controls are still visible even when all the results are displayed on a single page. A quick glance at the image below confirms this problem. It seems like a basi ...

javascriptjqueryangularjspaginationangular-ui-bootstrap

Is there a more efficient method for converting an array of objects?

Is there a more efficient way to change just one value in an array without iterating through every element? I've included the code below where I am trying to update the contact number for each user in an array. Although my current solution works, it ...

javascriptarraysvue.js

`Can't figure out how to input variables into PHP Form`

As a newcomer to PHP, I apologize if this question seems obvious. I would like to create a form that gathers more information than just the typical "name," "email," and "message." I am specifically looking to include the following labels: (i) Will you be ...

javascriptphpcontact-form

Updating the customer's billing address in Stripe without modifying their payment card details

Can I update a customer's stored address on Stripe without updating their card information as well? Currently, when customers update their info, they are required to enter their card details even for minor changes like the city. Is there a way to only ...

javascriptjquerycredit-cardstripe-payments