Angular/Typescript: 拦截器使浏览器发送一个额外的 OPTIONS http 请求
Angular/Typescript: Interceptor makes the browser sent an additional OPTIONS http request
我正在使用拦截器，以便将 JWT 令牌添加到每个发送到后端的请求，如 here 所述。我在 app.module.ts 文件中包含拦截器的方式是
providers: [
...
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
当我检查浏览器上的网络选项卡时，我看到一个额外的 OPTIONS 请求，而不是我最初发送的 GET 请求。
如果我不使用拦截器，OPTIONS 请求不会被发送。为什么会这样，我可以保留拦截器但摆脱额外的 OPTIONS 请求吗？
这不是执行此操作的拦截器。 CORS 用于 Cross-Origin 资源共享。
每个浏览器都向与托管页面的域不同的域发送 OPTIONS 请求。
结果如this answer
所述
As soon as you add a custom header, in my case Authorization or do anything that causes it to no longer be a simple request it, by default, sends the preflight request with the OPTIONS method instead of, in my case, POST.
这里也提到的比较详细here。
因此，如果您向其中添加自定义 headers，则无法避免额外的请求。
我正在使用拦截器，以便将 JWT 令牌添加到每个发送到后端的请求，如 here 所述。我在 app.module.ts 文件中包含拦截器的方式是
providers: [
...
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
当我检查浏览器上的网络选项卡时，我看到一个额外的 OPTIONS 请求，而不是我最初发送的 GET 请求。
如果我不使用拦截器，OPTIONS 请求不会被发送。为什么会这样，我可以保留拦截器但摆脱额外的 OPTIONS 请求吗？
这不是执行此操作的拦截器。 CORS 用于 Cross-Origin 资源共享。
每个浏览器都向与托管页面的域不同的域发送 OPTIONS 请求。
结果如this answer
所述As soon as you add a custom header, in my case Authorization or do anything that causes it to no longer be a simple request it, by default, sends the preflight request with the OPTIONS method instead of, in my case, POST.
这里也提到的比较详细here。
因此，如果您向其中添加自定义 headers，则无法避免额外的请求。