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.