Добавление каких-либо параметров или заголовков в Angular 2 http.post отправляет ВАРИАНТЫ

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; 
    } 
} 

Я действительно не знаю, что делать, так как я после того, что в настоящее время сказал в Angular2 OPTIONS method sent when asking for http.GET, и это не предварительный запрос. Раньше у меня была эта проблема с неправильным типом контента.

Answer 1

Фактическое исправление было вызвано двумя причинами: ненадлежащее исполнение CORS - для более пожалуйста смотрите здесь: Spring 4/5 global CORS configuration doesn't work giving `No 'Access-Control-Allow-Origin' header is present on the requested resource`

Тогда, когда я отправлял после входа в систему я получаю ошибку 415 Unsupported Media Type. Следуя инструкциям здесь: POST JSON fails with 415 Unsupported media type, 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 2

OPTIONS запрос сделан только для браузера. Угловая не участвует вообще.

«и это не предварительный запрос». - это определенно.

Вам необходимо настроить сервер для правильного ответа на запрос OPTIONS или убедиться, что приложение с угловым индексом загружено с того же сервера (также одного и того же порта), где вы делаете запрос.

Answer 3

Использование HTTP POST, как этот

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, что вы можете подписаться. Кроме того, мой пример