Angular 和 Golang “没有访问控制允许来源......”答案

【问题标题】：Angular & Golang "No Access-Control-Allow-Origin is presents..."Angular 和 Golang “没有访问控制允许来源......”
【发布时间】：2019-10-23 04:47:24
【问题描述】：

我正在使用 Angular 构建一个前端 GUI 应用程序来与我用 Go 编写的 API 服务器进行交互。

我尝试在客户端和服务器两端添加标头，但没有成功。我尝试禁用 http 拦截器，因此它不会添加 JWT 令牌，在这种情况下我会收到未经授权的访问错误，这是意料之中的。但是无论我将令牌添加到请求中（使用拦截器或在发出获取请求之前手动），未经授权的访问错误都消失了（到目前为止一切都很好），但是随后出现了丢失的标头错误。服务器应该返回存储文章的 JSON 数据，它可以与 Postman 和我的其他 vanilla JS 前端一起使用。

转码：

r.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
  http.ServeFile(w, r, "./index.html")
})

allowedHeaders := handlers.AllowedHeaders([]string{"X-Requested-With"})
allowedOrigins := handlers.AllowedOrigins([]string{"*"})
allowedMethods := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS"})

r.HandleFunc("/login", GetTokenHandler).Methods("POST")

apiRouter := r.PathPrefix("/api").Subrouter()
apiRouter.Use(jwtMiddleware.Handler)
apiRouter.HandleFunc("/articles", getArticles).Methods("GET")
apiRouter.HandleFunc("/articles/{id}", getArticle).Methods("GET")
apiRouter.HandleFunc("/articles", createArticle).Methods("POST")
apiRouter.HandleFunc("/articles/{id}", updateArticle).Methods("PUT")
apiRouter.HandleFunc("/articles/{id}", deleteArticle).Methods("DELETE")
fmt.Println("Server running on port", port)
log.Fatal(http.ListenAndServe(port, handlers.CORS(allowedHeaders, allowedOrigins, allowedMethods)(r)))

Angular 获取请求：

this.http.get('http://localhost:8000/api/articles')
.subscribe(res => {
    console.log(res);
},
err => console.log(err));

Angular HttpInterceptor：

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const token = localStorage.getItem("token");

        if (token) {
            const cloned = req.clone({
                headers: req.headers.append("Authorization", "Bearer " + token)
            });

            return next.handle(cloned);
        }
        else {
            return next.handle(req);
        }
    }
}

我收到此错误：

...请求..已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

编辑：Go 导入：

import (
    "encoding/json"
    "fmt"
    "log"
    "net/http"
    "strconv"
    "strings"
    "time"

    jwtmiddleware "github.com/auth0/go-jwt-middleware"
    "github.com/dgrijalva/jwt-go"
    "github.com/gorilla/handlers"
    "github.com/gorilla/mux"
)

【问题讨论】：

我看不到问题，你用什么包来处理那些“路由器”和中间件的东西。
我将在我的 Go API 中导入的包添加到问题中，在 Angular 方面，我使用来自 @angular/common/http 的 HttpClient、HttpHeaders.. 等

标签： angular go jwt

【解决方案1】：

此问题称为 CORS。 Cross Origin Resource Sharing。当请求和响应的来源不同时，就会出现这种情况。例如：如果您的项目在 https://139.43.33.122:1111/ 上，而您的服务器托管在 https://123.0.3.444:3000 上，那么您的请求和响应的来源完全不同，因此，浏览器将阻止响应。这是浏览器的事情。邮递员不关心他们的出身。要接收响应，有两种方法（可能更多，但我只使用这两种）。

附加标头：如果您有权访问/许可服务器代码，则在服务器响应中添加附加标头： Access-Control-Allow-Origin：http://siteA.com，Access-Control-Allow-Methods：GET、POST、PUT、Access-Control-Allow-Headers：Content-Type。
使用扩展程序：有多个扩展程序可以绕过此限制。如果您无权更改服务器响应，那么这是可行的方法。我个人仅使用此方法。

【讨论】：

【解决方案2】：

以下内容将帮助您解决此问题：

1) 由于您在请求标头中也包含 Authorization，因此在服务器中允许同样的内容似乎被遗漏了。

2) 您可以使用 Proxy.config 映射到所需的主机（主机名 + 端口） a) 创建 proxy.config.json 文件：

{
  "/api/articles": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

b) 通过以下命令运行：

ng serve --proxy-config proxy.conf.json

Refer This To Setup Proxy

先试试这些。

【讨论】：