"CORS请求未成功"尽管为Nginx，angular-http-server和Golang启用了它 [英] "CORS request did not succeed" despite enabling it for Nginx, angular-http-server, and Golang
问题描述
我已经在开发中成功启用了CORS.我的Golang后端与本地计算机上的Angular前端通信良好.但是，我不知道如何在生产中启用CORS(DigitalOcean上的Ubuntu).我在Firefox上得到了这个
跨域请求被阻止:同一起源策略不允许读取 http://localhost:12345/.(原因:CORS请求未成功."
我正在使用systemd单元运行Golang后端，并在localhost:12345上为其提供服务.
我将Angular前端作为使用PM2和angular-http-server的构建(使用--prod标志构建)运行，并通过端口8080提供服务.该端口位于防火墙后面.我使用Nginx来处理此前端的HTTPS流量.它在端口80上侦听，并在端口8080上将(proxy_pass)请求传递给它.着陆页(仅需要GET请求)在浏览器中加载正常，因此此设置似乎可行.
我正在使用的版本:Ubuntu 16.04，PM2 3.3.1，Angular CLI 7.3.4，angular-http-server 1.8.1
当前端尝试将JSON数据发布到后端时，就会发生问题(如上面的消息所示，localhost:12345/anteroom).
我已经读到CORS是服务器端的问题.因此，我尝试过在有服务器的任何地方(即后端Nginx和angular-http-server)启用它.
它已在我的Golang代码中启用:
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")
}
这成功地启用了CORS的开发功能，其中提供服务的Golang只是打开其内置的二进制文件，而为Angular提供的是ng serve.
以上内容在生产中还不够.因此，我尝试使用angular-http-server启用它.请注意最后的--cors标志:
pm2 start $(which angular-http-server) --name app -- --path /PATH/TO/DIST -p 8080 --cors
我还尝试在与Angular前端构建有关的Nginx文件中启用它(改编自这里):
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;
}
}
我看过PM2，angular-http-server，Nginx和许多其他内容的文档，但我不知道自己缺少什么.让我知道?谢谢.
感谢Ravinder Payal，我使用tcpdump来回查看标题.简而言之，在某个时候，它使我意识到我应该将前端设置为与"localhost"进行通信.显然，这意味着任何使用前端的客户端浏览器都将在其自己的本地计算机上进行查找.
为解决此问题，我设置了单独的应用程序环境对于我的前端.这样一来，前端可以在分阶段中与localhost进行通信，而在生产环境中则可以与我的后端域进行通信.
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.
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.
这篇关于"CORS请求未成功"尽管为Nginx，angular-http-server和Golang启用了它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
