Angular 和 Golang“不存在访问控制允许来源......”

Question

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

我尝试在客户端和服务器两端添加标头，但没有成功。我尝试禁用 http 拦截器，因此它不会添加 JWT 令牌，在这种情况下我会收到未经授权的访问错误，这是预期的。但是，无论我将令牌添加到请求中（无论是使用拦截器还是在发出获取请求之前手动），未经授权的访问错误都会消失（到目前为止一切顺利），但随后会出现丢失标头错误。服务器应该返回存储文章的 JSON 数据，它可以与 Postman 和我的其他普通 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)))

角度获取请求：

this.http.get('http://localhost:8000/api/articles')

.subscribe(res => {

    console.log(res);

},

err => console.log(err));

角度 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”标头。

Answer 1

此问题称为CORS。跨域资源共享。_ _ _ _ 当请求和响应的来源不同时就会出现这种情况。例如：如果您的项目位于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，访问控制允许标头：内容类型。使用扩展：有多个扩展可以绕过此限制。如果您无权更改服务器响应，那么这就是可行的方法。我个人仅使用此方法。

Answer 2

以下事项将帮助您解决此问题：1）由于您也在请求标头中包含了授权，因此在服务器中允许似乎错过了相同的授权。2) 您可以使用 Proxy.config 映射到所需的主机（主机名 + 端口） a) 创建 proxy.config.json 文件：{  "/api/articles": {    "target": "http://localhost:8000",    "secure": false  }}b) 通过以下命令运行：ng serve --proxy-config proxy.conf.json