问题描述

我已经在开发中成功启用了CORS.我的Golang后端与本地计算机上的Angular前端通信良好.但是，我不知道如何在生产中启用CORS(DigitalOcean上的Ubuntu).我在Firefox上得到了这个

跨域请求被阻止:同一起源策略不允许读取 http://localhost:12345/.(原因:CORS请求未成功."

我正在使用systemd单元运行Golang后端，并在localhost:12345上为其提供服务.

--prodproxy_pass

我正在使用的版本: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")
}

ng serve
--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.

--prodproxy_pass

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")
}

ng serve
--cors
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屋！