尽管已为Nginx，angular-http-server和Golang启用了“ CORS请求，但未成功”

Question

I've enabled CORS successfully in development. My Golang back end communicates well with my Angular front end on my local machine. However, I can't figure out how to enable CORS in production (Ubuntu on DigitalOcean). I get this on Firefox:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:12345/anteroom. (Reason: CORS request did not succeed)."

I'm running the Golang back end with a systemd unit and serving it at localhost:12345.

I'm running the Angular front end as a build (built with --prod flag) using PM2 with angular-http-server, and serving it out of port 8080. This port is behind a firewall. I use Nginx to handle HTTPS traffic for this front end. It listens on port 80 and passes (proxy_pass) requests to it at port 8080. The landing page (which requires only a GET request) loads ok in the browser, so this setup seems feasible.

The versions I'm working with: Ubuntu 16.04, PM2 3.3.1, Angular CLI 7.3.4, angular-http-server 1.8.1.

The problem happens when the front end tries to POST JSON data to the back end (localhost:12345/anteroom, as seen in the message above).

I've read that CORS is a server-side issue. So, I've tried enabling it wherever I've a server, that is, in the back end, Nginx, and angular-http-server.

It's enabled in my Golang code:

func anteroom(res http.ResponseWriter, req *http.Request) {
    res.Header().Set("Access-Control-Allow-Origin", "*")
    res.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS")
    res.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    res.Header().Set("Content-Type", "application/json")
...
}

func main() {
    ...
    # Using Gorilla mux router.
    router := mux.NewRouter()
    router.HandleFunc("/anteroom", anteroom).Methods("POST", "OPTIONS")
}

This successfully enables CORS in development, where serving Golang is just opening its built binary and Angular is served with ng serve.

The above isn't enough in production. So, I've tried enabling it with angular-http-server. Note the --cors flag at the end:

pm2 start $(which angular-http-server) --name app -- --path /PATH/TO/DIST -p 8080 --cors

I've also tried enabling it in the Nginx file pertaining to the Angular front end build (adapted from here):

location / {
if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
        add_header 'Content-Type' 'application/json';
        return 204;
     }

     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
        add_header 'Content-Type' 'application/json';
     }

     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
     }
proxy_pass http://localhost:8080;
}
}

I've looked at the documentation for PM2, angular-http-server, Nginx, and a bunch of other things and I don't know what I'm missing. Let me know? Thanks.

Answer 1

Thanks to Ravinder Payal, I used tcpdump to look at the headers going back and forth. To cut a very long story short, at some point it made me realise that I'd set the front end to communicate with "localhost". Obviously, that meant whichever client browser using the front end would be looking for it on its own local machine.

To solve this, I set up separate application environments for my angular front end. This allows the front end to communicate with localhost in staging and with my back end domain in production.