CORS header 'Access-Control-Allow-Origin' does not match... but it does‼

Question

I'm making a very simple JSON API in Java. It's actually a Project Zomboid mod that serves object coordinates. This is how my HTTP handler looks like:

public class JSONZomboid implements HttpHandler
{
    @Override
    public void handle(HttpExchange t) throws IOException {
        // HEADERS
        Headers headers = t.getResponseHeaders();
        headers.set("Content-Type", "text/json");   
        headers.set("Access-Control-Allow-Origin", "pzmap.crash-override.net");                 
        t.sendResponseHeaders(200,0);
        //BODY
        OutputStream os = t.getResponseBody();
        os.write("{\n".getBytes());
          // generate JSON here
        os.write("}".getBytes());
        os.close();
    }
}

I want to load this into Project Zomboid map project using userscript which means I need to enable CORS to connect. This is done via simple code:

PlayerRenderer.prototype.fetchInfo = function() {
  $.get("http://127.0.0.1:8000/test", {}, this.displayPoints.bind(this));
}

But I get this error:

Warning: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/test. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'pzmap.crash-override.net').

Even in the console I can clearly see the error is misleading:

If I didn't already hate CORS, I'd start to hate it now. Can you please tell me what is the actual string that belongs in the allow origin header?

Syzygy

The header should have the hostname of the site that is allowed access to the content. If you are loading your pages from a site hosted at pzmap.crash-override.net then it should work. The error is telling you what the header contains, not what the source domain was. – Preside

You can see which site I'm loading from in the request headers (Origin and Referer). – Ananna

Actually it's very hard to see the detail in those images on a little screen :/ – Preside

Also I think the header value may need to be a complete URI, like http://pzmap.crash-override.net – Preside

the #1 comment helped me a lot! thanks!! :-) – Vierno

Thank you for the screenshot. Made me look at my network requests and noticed a trailing slash was the difference. – Exacerbate

Answer 1

The actual issue is that the Access-Control-Allow-Origin header should include the protocol, not just the hostname. It would be much better if the web browsers simply included this part in the error message.

So in the above, do:

headers.set("Access-Control-Allow-Origin", "http://pzmap.crash-override.net");  

Contrabass

headers.set("Access-Control-Allow-Origin", "pzmap.crash-override.net/"); is also not working, end up spent 2 hours to resolve removing last slash symbol... :( – Tiberius

Answer 2

I wrestled with this same problem for hours, and discovered that I had added a forward slash to the end of my origin: https://foo.com/, when it should have been https://foo.com. (Talk about a major face-palm moment!)

My (now working) Express Node.JS setup:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  methods: 'GET,POST,PATCH,DELETE,OPTIONS',
  optionsSuccessStatus: 200,
  origin: 'https://foo.com'
}));
app.options('*', cors());

Disequilibrium

And I even thought about that trailing slash when I pasted the URL copied from my browser and wondered whether that should be removed... ;-) – Swafford

Answer 3

The comment #1 above is correct: CORS needs the Access-Control-Allow-Origin header to be match what the client's original request was (for an end-to-end SSL experience). So in this case, be sure you set pzmap.crash-override.net in your Access-Control-Allow-Origin headers.

Two notes:

1- Despite what you may read online, nginx currently requires multiple entries to be listed as separate lines, a la: add_header Access-Control-Allow-Origin "https://developers.google.com"; add_header Access-Control-Allow-Origin "https://imasdk.googleapis.com";

2 - Also despite what you may read online, usage of a wildcard is not ok. Not all clients (meaning browsers) allow it.

Slighting

Answer 4

This error can also occur if the response includes more than one Access-Control-Allow-Origin header.

Parfitt

Answer 5

Make sure your server return status 200 in Preflight request.

This error can also occur if server return Status Code !=200 in Preflight request. In my case my server already return Access-Control-Allow-Origin match origin but the status code was 302 cause this error.

Supramolecular

Answer 6

for people who were not able to fix the above issue given the answer.

there can be another reason for this same cors error.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin

refer this for example.

i was encountering this same cors error when i was consuming the duplicate following response headers

HTTP/2 200 
date: Mon, 15 Jul 2024 06:14:48 GMT
content-type: application/json; charset=utf-8
access-control-allow-credentials: true
access-control-allow-credentials: true
access-control-allow-origin: *
access-control-allow-origin: *
access-control-expose-headers: Content-Length
access-control-expose-headers: Content-Length
X-Firefox-Spdy: h2

the request is succeeding with status code 200 but the browser doesn't allow the access of the response due to inconsistent response headers

Driftage