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?

Solution 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");  

Solution 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());

Solution 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.

Comments

[Pointy]

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.

[Tomáš Zato]

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

[Pointy]

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

[Pointy]

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

[MMM]

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

[Mandakh]

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... :(