angular - OPTIONS 请求的 CORS 问题
问题描述
我正在开发一个使用 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 和应用程序代码在同一台服务器上时,上面的代码可以正常工作,但我在 aws 上创建了两个 ec2 实例来分别托管 api 和应用程序。
以下是我在 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 请求
请帮忙
解决方案
您无需在 Angular 应用程序中执行任何操作即可使其正常工作,因为CORS 是服务器端配置。从本质上讲,它说明了谁可以调用您的 API 并使用什么方法/标头/其他内容。在对 OPTIONS 请求浏览器的响应中收到正确的标头后,将决定是否允许您进行此调用。Angular 应用程序与此无关。因此,您收到的错误表明您没有在 Web 服务器上正确配置 CORS。例如,您可以从这篇文章开始,了解如何在 GO Web 服务器上启用它。
推荐阅读
- java - 如何将 Snowflake 中的 FILE_FORMAT 写入 Java 代码?
- reactjs - 我如何使用 useState 在 React 中悬停
- cmake - CMake find_library 在 MSVC 上找不到现有库
- python - 如何在 Python 中设置一类数学函数?
- java - 如何根据字符频率对字符串列表进行排序
- reactjs - 意外状态更新导致“useState”函数
- javascript - 如何在所有文件中重命名 React 组件道具?
- javascript - 为什么这个闭包函数没有编译器错误?
- c# - 使物体朝向它前进的方向
- windows - Bind9 DNS 服务器无法在 Windows 11 上运行