Angular HttpClient 不发送 POST，它发送 OPTIONS

Question

我是使用 Angular HttpClient 的新手（也会写英文）

我有一个问题，我正在尝试使用 POST 方法发送 HTTP 请求以协商 OAuth 令牌获取，但 Angular 发送 OPTIONS 请求：

服务：

login(username: string, password: string) {
const body = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password`;

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic ' + btoa(TOKEN_AUTH_USERNAME + ':' + TOKEN_AUTH_PASSWORD)
  })
};  


return this.http.post<string>(AuthenticationService.AUTH_TOKEN, body, httpOptions);

结果：

对于我的后端，我使用的是 Spring Security，并添加了一个过滤器以允许 CORS：

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(0);
    return bean;
}

Answer 1

这与角度无关，这是您的浏览器在做的事情。

Check this issue.

我假设您的服务器在 localhost:8080 上运行，而您的 Angular 应用程序在 localhost:4200 上运行。由于您的请求是跨源请求，因此浏览器首先发送OPTIONS 请求以查看它是否安全。此时，您的服务器会返回一个带有 http 代码 401 的响应，这会阻止发出 post 请求。 要么你必须在你的服务器上做一些配置，要么你可以使用 webpack 代理。这仅适用于您的本地计算机。如果您从服务器提供捆绑的 Angular 应用程序，那么您无需为生产做任何事情。我使用这种技术已经有一段时间了，而且效果很好。

例子，

用户从 mydomain.com/ng-app 访问我的 Angular 应用程序 我还从同一个域 mydomain.com/api 提供我的 rest api

所以我的应用程序总是向它所提供服务的服务器发出请求，这在生产中不会出现问题。

对于后者，您可以执行以下操作

在项目的根目录下创建一个proxy.conf.json（在package.json 旁边） 并将以下内容放入

{
    "/api/": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true
    }
}

在 package.json 中，编辑您的 start 脚​​本并使其成为 ng serve --proxy-config proxy.conf.json

另外，从您的前端，不要直接将请求发送到 localhost:8080，而只需编写类似 http.post('/api/getSomeData') 的内容，它将向 localhost:4200 发出请求，并将其重定向到 localhost:8080。这样，您就不必处理 CORS。

Answer 2

OPTIONS 请求首先发送是因为CORS，Angular 需要您的后端许可才能知道它是否可以POST。因此，在您的后端，您需要启用 CORS 才能发送 http 请求。

Answer 3

对于 Spring Boot 应用程序，要启用 cors 请求，请在您各自的控制器上使用 @CrossOrigin(origins = "*", maxAge = 3600)。

Refer this

Answer 4

使用 Angular cli 配置 https://angular.io/guide/build#proxying-to-a-backend-server

Answer 5

使用 NestJS/Express 后端，我通过启用 CORS 解决了这个问题：https://docs.nestjs.com/techniques/security#cors

Answer 6

最后我发现了错误。 过滤器的顺序不正确。我将它调整为 Ordered.HIGHEST_PRECEDENCE 这样它会覆盖 Spring 过滤器。

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    return bean;
}