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?

Answer 1

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

Answer 2

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.