关于 angular:CORS 问题与 OPTIONS 请求


CORS issue with OPTIONS request

我正在开发一个使用 angular 5 构建的应用程序并面临 CORS 问题，为了授权用户我正在使用 jwt 令牌方法并使用 jwt.interceptor 在标头中发送它，如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
        // add authorization header with jwt token if available
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${currentUser.token}`,
                    Ip:currentUser.Ip
                }
            });
        }
        return next.handle(request);
    }
}

此代码修改标头并添加令牌/承载，因为此修改浏览器在实际 API 之前发送预检 OPTIONS 请求，我使用 httpclient 发送 api 请求如下

1
2
3
4
5
6
7
8
9
10
11
12
13
merchantDefaultSetup(ipAddress) {
      if(this.access_token != '')
      {
         this.coreService.setMerchantDefaultSetup(this.access_token, ipAddress).subscribe(res => {this.apiResponse = res},
                                                                         err => console.log(err),
                                                                         ()  => this.checkSetMerchantDefaultSetupApiResponse(this.apiResponse)
                                                                        );
      }
      else
      {
        this.router.navigate(["/dashboard"]);
      }
   }

这个功能使用以下服务

1
2
3
4
5
public setMerchantDefaultSetup(token, ipAddress)
   {
      let header = new HttpHeaders({'Content-Type': 'application/json', 'Ip': ipAddress});
      return this.http.get<Response>(this.apiUrl+'merchant/default-setup/'+token, {headers: header}).map(response => response.response);
   }

当 api 和应用程序代码在同一台服务器上时，上面的代码可以正常工作，但我已经在 aws 上创建了两个 ec2 实例来分别托管 api 和应用程序。

以下是我在 api hit

上遇到的错误

1
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mydomain.mytestsite.com:8080/api/v1/merchant/default-setup/678as6d98a6s8d68. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

REST api 使用 golang 构建并运行在 8080 端口

所有文章都提供了 get、post、put 方法的解决方案，但在我的情况下它们工作正常，除非有任何 preflight OPTIONS 请求

请帮忙

您无需在 Angular 应用程序中执行任何操作即可使其正常工作，因为 CORS 是一种服务器端配置。从本质上讲，它说明了谁可以调用您的 API 并使用什么方法/标头/其他内容。在对 OPTIONS 请求浏览器的响应中收到正确的标头后，将决定是否允许您进行此调用。 Angular 应用程序与此无关。因此，您收到的错误表明您没有在 Web 服务器上正确配置 CORS。例如，您可以从这篇文章开始，了解如何在 GO Web 服务器上启用它。

您是否考虑过使用 https://github.com/rs/cors 包？

使用 cors 包，您可以使用 AllowAll() 方法轻松测试您的连接。它为您处理 OPTIONS 请求。

1
2
3
4
handler := cors.AllowAll().Handler(mux)
go func() {
    http.ListenAndServe(":5050", handler)
}()

默认情况下禁止跨源请求。
您可以为您的应用程序允许其他来源。
但是在生产中，您不应该使用 AllowAll()，而是定义您允许的来源。