Angular HttpClient不发送POST，它发送OPTIONS

Question

我是新手使用Angular HttpClient（并且也写英文）

我有一个问题，我正在尝试使用POST方法发送HTTP请求，以便取消OAuth令牌obtenction，但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，而您的角度应用程序运行在localhost：4200。由于您的请求是跨源请求，浏览器首先发送OPTIONS请求以查看它是否安全。此时，您的服务器返回一个带有http代码401的响应，该响应阻止发出请求。您必须在服务器中进行一些配置，或者您可以使用webpack代理。这仅适用于您的本地计算机。如果您从服务器提供捆绑的角度应用程序，那么您将无需为生产做任何事情。我已经使用这种技术很长一段时间了，它工作得很好。

例，

用户从mydomain.com/ng-app访问我的角度应用程序我也从同一个域提供我的rest api，mydomain.com / 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

对于spring boot应用程序，要启用cors请求，请在各自的控制器上使用@CrossOrigin（origins =“*”，maxAge = 3600）。

Refer this

Answer 3

由于OPTIONS，首先发送CORS请求，Angular需要您的后端的许可才能知道它是否可以POST。所以在你的后端你需要启用CORS才能获得http请求。

Answer 4

最后我发现了错误。过滤器的顺序不正确。我把它调整到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;
}