Question

我正在开发一个使用angular 5构建并面临CORS问题的应用程序，以便授权用户使用jwt令牌方法并使用jwt.interceptor将其发送到头文件中，如下所示

export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // 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请求如下

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

此功能使用以下服务

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和app代码在同一台服务器上时正常工作但不是我在aws上创建了两个ec2实例来分别托管api和app。

以下是我在api hit上遇到的错误

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方法的解决方案，但除非有任何预检OPTIONS请求，否则它们在我的情况下工作正常

请帮忙

Answer 1

您无需在角度应用中执行任何操作即可使其正常工作，因为 CORS是服务器端配置。基本上它说谁可以调用你的API并使用什么方法/标题/其他东西。在响应OPTIONS请求浏览器时收到了正确的标题，然后决定是否允许您进行此调用。 Angular app与此无关。因此，您收到的错误告诉您未在Web服务器上正确配置CORS。例如，您可以从this article开始，了解如何在GO Web服务器上启用它。

Answer 2

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

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

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

默认情况下禁止交叉原始请求。您可以为您的应用程序提供其他来源。但是在生产中，您不应使用AllowAll（），而是定义允许的原点。

OPTIONS请求

2 个答案: