Angular 角度及；“戈朗”；“不存在访问控制允许原点…”；

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

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

Go代码：

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));

角形http拦截器：

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

---

以下事项将帮助您解决此问题：

1） 由于您在请求头中也包含了授权，因此在服务器中允许同样的内容，这似乎是遗漏的

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

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

b） 通过以下命令运行：

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

---

首先尝试这些方法。

以下方法将帮助您解决此问题：

1） 由于您在请求头中也包含了授权，因此在服务器中允许同样的内容，这似乎是遗漏的

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

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

b） 通过以下命令运行：

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

---

首先尝试这些方法。

此问题称为CORSCrossOriginResourceSharing。当请求和响应的来源不同时，就会出现这种情况。例如：如果您的项目位于上，而您的服务器位于上，则请求和响应的来源完全不同，因此浏览器将阻止响应。这就是浏览器。邮递员不在乎他们的出身。要接收响应，有两种方法（可能更多，但我只使用这两种）

附加标题：如果您有权访问/许可服务器代码，则向服务器响应添加附加标题： 访问控制允许来源：，访问控制允许方法：获取、发布、放置，访问控制允许标题：内容类型

使用扩展：有多个扩展可以绕过此限制。如果您没有权限更改服务器响应，那么这就是解决方法。我个人只使用这种方法

---

此问题称为CORSCrossOriginResourceSharing。当请求和响应的来源不同时，就会出现这种情况。例如：如果您的项目位于上，而您的服务器位于上，则请求和响应的来源完全不同，因此浏览器将阻止响应。这就是浏览器。邮递员不在乎他们的出身。要接收响应，有两种方法（可能更多，但我只使用这两种）

附加标题：如果您有权访问/许可服务器代码，则向服务器响应添加附加标题： 访问控制允许来源：，访问控制允许方法：获取、发布、放置，访问控制允许标题：内容类型

使用扩展：有多个扩展可以绕过此限制。如果您没有权限更改服务器响应，那么这就是解决方法。我个人只使用这种方法

---

在问题中，我看不出你用什么软件包来处理那些“路由器”和中间件的东西。我在问题中添加了在Go API中导入的软件包，在角度方面，我使用的是HttpClient，HttpHeaders。。来自@angular/common/httpI的etc在问题中没有看到，您使用什么包来处理这些“路由器”和中间件。我在问题中添加了在Go API中导入的包，在angular方面，我使用的是HttpClient，HttpHeaders。。来自@angular/common/http的etc