angular - 为什么 Angular 将我的请求方法更改为 OPTIONS？

问题描述

我正在 Angular 中实现 JWT 拦截器。

我按照这里的例子来实现我的 JWT 拦截器，我的源代码如下：

import { HttpInterceptor, HttpRequest, HttpEvent, HttpHandler, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { CookieService } from 'ngx-cookie-service';

@Injectable()
export class JWTInterceptor implements HttpInterceptor {
  constructor(private cookieService: CookieService) {}
  intercept(request: HttpRequest<any>,
            next: HttpHandler): Observable<HttpEvent<any>> {
              console.log('Interceptor Called');
              if (this.cookieService.check('accessToken')) {
                request = request.clone({
                  withCredentials: true,
                  setHeaders: {
                    Authorization: `Bearer ${this.cookieService.get('accessToken')}`
                  }
                });
              }
              return next.handle(request);
    }
}

我的 tomcat 服务器响应如下：

HTTP 状态 405 - 方法不允许
JSP 只允许 GET POST 或 HEAD

当我检查火狐控制台时，我发现请求方法更改为“OPTIONS”，并且 Access-Control-Request-Method 设置为“POST”。

但是，当我从标题中删除以下代码时，我的 tomcat 没有响应错误。

setHeaders: {
                Authorization: `Bearer 
                ${this.cookieService.get('accessToken')}`
              }

我的 JSP 源如下：

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="java.util.*"%>
<%
String origin = request.getHeader("Origin");
String VALID_METHODS = "DELETE, HEAD, GET, OPTIONS, POST, PUT";
response.setHeader("Access-Control-Allow-Origin",origin);
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", VALID_METHODS);
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, Authorization");
System.out.println("Hello");
for (Enumeration<String> e=request.getHeaderNames();e.hasMoreElements();)
{
    System.out.println(e.nextElement());    
}


try
{
    for (Cookie cookie : request.getCookies()) {
        System.out.println(cookie.getName()+"="+cookie.getValue()+";"+cookie.getMaxAge()+";"+cookie.getDomain()+";"+cookie.getPath()+"<br>");
    }
}
catch (NullPointerException e) 
{
    System.out.println("No cookie Detected.");
}

%>

我不知道为什么。我该如何解决这个问题？

标签： angular

从CORS 的功能概述：

该规范要求浏览器“预检”请求，使用 HTTPOPTIONS请求方法从服务器请求支持的方法，然后在服务器“批准”后发送实际请求。

它的意思是，这是一个期望浏览器检查服务器是否允许 CORS 的规范。

浏览器通过读取响应标头来检查它。如果他们有一个带有请求Access-Control-Allow-Origin的值*或来源的标头，那么浏览器可以确定 CORS 是允许的。

所以只有如果是，那么实际的请求才会被发送。

这不是 Angular 特有的。这就是浏览器实现 CORS 策略的方式。

angular - 为什么 Angular 将我的请求方法更改为 OPTIONS？

问题描述

解决方案

推荐阅读