在Angular 2 http.post上添加任何選項或標題會發送OPTIONS

Question

我正在嘗試通過http.post()將令牌信息發送回服務器。 如果我從中刪除選項，它將發送POST，但如果將其重新添加，則會發送從服務器代碼中拒絕的OPTIONS。 我也嘗試刪除“ withCredentials”。

export class EntityService {

    public entity: EntityModel;
    private options: RequestOptions;

    constructor( @Inject(Http) private http: Http, @Inject(AuthenticationService) authService) {
        let headers = new Headers({ 'X-Authorization': 'Bearer ' + authService.token});
        this.options = new RequestOptions({ headers: headers, withCredentials: true });
    }

    public store(entity: EntityModel): Observable<string> {

        var request;
        if (!entity.uuid) {
            request = this.http.post("http://localhost:8080/api/entity", JSON.stringify(entity), this.options);
        }
        else {
            request = this.http.put("http://localhost:8080/api/entity", JSON.stringify(fact), this.options);
        }
        return request.map((res: Response) => res.text());
    }
}

我的身份驗證服務如下所示：

import { Injectable, Inject } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

//http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial
@Injectable()
export class AuthenticationService {
    public token: string;

    constructor(@Inject(Http) private http: Http) {
        // set token if saved in local storage
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        this.token = currentUser && currentUser.token;
    }

    login(username: string, password: string): Observable<boolean> {;
        console.log("login...");
        return this.http.post('http://localhost:8080/api/auth/login', JSON.stringify({ username: username, password: password }))
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                let token = response.json() && response.json().token;
                if (token) {
                    // set token property
                    this.token = token;

                    // store username and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));

                    // return true to indicate successful login
                    return true;
                } else {
                    // return false to indicate failed login
                    return false;
                }
            });
    }

    logout(): void {
        // clear token remove user from local storage to log user out
        this.token = null;
        localStorage.removeItem('currentUser');
    }
}

這是我的Spring配置：

@SpringBootApplication
public class SpringBootApp extends WebMvcConfigurerAdapter {

    private boolean workOffline = true;
    private boolean setupSchema = false;
    private IGraphService graphService;
    private DbC conf;

    @Autowired
    public SpringBootApp(IGraphService graphService, DbC conf)
    {
        this.graphService = graphService;
        this.conf = conf;
    }

    public static void main(String[] args) throws Exception {
        SpringApplication.run(SpringBootApp.class, args);
    }

    @Bean
    public Filter caseInsensitiveRequestFilter() {
        return new CaseInsensitiveRequestFilter();
    }

    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "PUT", "POST", "DELETE","OPTIONS");
    }

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

我真的不知道該怎么辦，因為我正在跟蹤在請求http.GET時發送的Angular2 OPTIONS方法中所說的內容 ，這不是預檢請求。 之前我曾因內容類型錯誤而遇到此問題。

Answer 1

OPTIONS請求僅由瀏覽器發出。 Angular根本不涉及。

“而且這不是飛行前的要求。” -當然是。

您需要配置服務器以正確響應OPTIONS請求，或確保從與請求相同的服務器（也是同一端口）加載Angular應用程序。

Answer 2

實際的修復有兩個原因：不正確的CORS實施-請在此處查看更多信息： Spring 4/5全局CORS配置無法正常工作，因為在請求的請求中沒有'Access-Control-Allow-Origin'標頭資源`

然后，當我在登錄后進行發布時，出現錯誤415 Unsupported Media Type 。 按照此處的說明進行操作后： POST JSON失敗，顯示415不支持的媒體類型，Spring 3 mvc

我在請求中添加了Content-Type和Accept標頭，它解決了該問題。 似乎Content-Type是實際需要的。

export class EntityService {

    public entity: EntityModel;
    private options: RequestOptions;

    constructor( @Inject(Http) private http: Http, @Inject(AuthenticationService) authService) {
        let headers = new Headers({ 
           'X-Authorization': 'Bearer ' + authService.token,
           'Content-Type': 'application/json'
        });
        this.options = new RequestOptions({ headers: headers, withCredentials: true });
    }

    public store(entity: EntityModel): Observable<string> {

        var request;
        if (!entity.uuid) {
            request = this.http.post("http://localhost:8080/api/entity", JSON.stringify(entity), this.options);
        }
        else {
            request = this.http.put("http://localhost:8080/api/entity", JSON.stringify(fact), this.options);
        }
        return request.map((res: Response) => res.text());
    }
}

Answer 3

像這樣使用http發布

import { Http, Headers, Response, Request } from '@angular/http';

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('X-Authorization', this.token);
headers.append('Authorization', 'Bearer ' + jwtToken);

return this.http.post(url, data, {headers})
  .map(res => { console.log(res) })
  .catch(err => { console.log(err) } );

請注意，此示例返回您可以訂閱的Observable。 也是我的例子