CORS header 'Access-Control-Allow-Origin' missing

Question

I'm calling this function from my asp.net form and getting following error on firebug console while calling ajax.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://anotherdomain/test.json. (Reason: CORS header Access-Control-Allow-Origin missing).

var url= 'http://anotherdomain/test.json';
        $.ajax({
            url: url,
            crossOrigin: true,
            type: 'GET',
            xhrFields: { withCredentials: true },
            accept: 'application/json'
        }).done(function (data) {
            alert(data);                
        }).fail(function (xhr, textStatus, error) {
            var title, message;
            switch (xhr.status) {
                case 403:
                    title = xhr.responseJSON.errorSummary;
                    message = 'Please login to your server before running the test.';
                    break;
                default:
                    title = 'Invalid URL or Cross-Origin Request Blocked';
                    message = 'You must explictly add this site (' + window.location.origin + ') to the list of allowed websites in your server.';
                    break;
            }
        });

I've done alternate way but still unable to find the solution.

Note: I've no server rights to make server side(API/URL) changes.

Answer 1

This happens generally when you try access another domain's resources, and that other domain hasn't your domain on his cors origin whitelist.

To access ressources in a domain, it have to be previously authorized by the "cors origin" policy of that domain.

This is a security feature to avoid for example other domains to use ressources on your server or that can help to prevent website spoofing

You can fix this problem if you have control of both domains servers:

Solution 1: via .htaccess

You can write this in the .htaccess of the requested domain file:

=> Not recommended allow all domains

    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>

=> Recommended allow only expected domains

    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin 'https://my-domain.example'
    </IfModule>

Solution 2: set headers the correct way

If you set this into the response header of the requested file, you will allow everyone to access the resources:

=> Not recommended allow all domains

Access-Control-Allow-Origin : *

OR

=> Recommended allow only expected domains

Access-Control-Allow-Origin : http://www.my-domain.example

Answer 2

Server side put this on top of <filename>.php:

header('Access-Control-Allow-Origin: *');

You can set specific domain restriction access:

header('Access-Control-Allow-Origin: https://www.example.com');

Answer 3

in your ajax request, adding:

dataType: "jsonp",

after line :

type: 'GET',

should solve this problem ..

hope this help you

Answer 4

If you are using Express js in backend you can install the package cors, and then use it in your server like this :

const cors = require("cors");
app.use(cors());

This fixed my issue

Answer 5

You must have got the idea why you are getting this problem after going through above answers.

self.send_header('Access-Control-Allow-Origin', '*')

You just have to add the above line in your server side.

Answer 6

This worked for me:

Create php file that will download content of another domain page without using js:

<?
//file name: your_php_page.php
echo file_get_contents('http://anotherdomain/test.json');
?>

Then run it in ajax (jquery). Example:

$.ajax({
  url: your_php_page.php,
  //optional data might be usefull
  //type: 'GET',
  //dataType: "jsonp", 
  //dataType: 'xml',
  context: document.body
}).done(function(data) {

  alert("data");
  
}); 

Answer 7

You have to modify your server side code, as given below

public class CorsResponseFilter implements ContainerResponseFilter {
@Override
public void filter(ContainerRequestContext requestContext,   ContainerResponseContext responseContext)
    throws IOException {
        responseContext.getHeaders().add("Access-Control-Allow-Origin","*");
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");

  }
}

Answer 8

This can also happen if you use Google Cloud Armor and it denies the request due to a security policy like a SQL injection attempt. In that case it'll just return an HTML page with 403 Forbidden on it and none of the headers you'd expect:

HTTP/2 403 Forbidden
content-length: 134
content-type: text/html; charset=UTF-8
date: Tue, 28 Mar 2023 16:55:21 GMT
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
X-Firefox-Spdy: h2

Answer 9

In a pinch, you can use this Chrome Extension to disable CORS on your local browser.

Allow CORS: Access-Control-Allow-Origin Chrome Extension