Angular HttpClient不发送POST，它发送OPTIONS

Question

我是新手，使用Angular HttpClient(也写英文)

我有一个问题，我正在尝试使用POST方法发送HTTP请求，以便协商OAuth token 阻塞，但是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

它与 Angular 无关，是您的浏览器在做的。

Check this issue。

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

例子，

用户从mydomain.com/ng-app访问我的 Angular 应用程序
我还从同一个域mydomain.com/api提供我的其余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。