Góc 2 Xác thực cơ bản không hoạt động

Question

Tôi đang cố gắng kết nối/thực hiện yêu cầu POST với API bằng Angular2, Đây là một API rất đơn giản với mật khẩu Xác thực cơ bản. Khi vô hiệu hóa mật khẩu trên api, mọi thứ hoạt động như mong đợi. Nhưng khi tôi bật Basic Authentication Angular thì không còn có thể kết nối với API nữa. Trong Postman tất cả mọi thứ hoạt động. Tôi đã thử những điều sau mà không thành công.

tôi đã có hai tiêu đề "Content-Type" và "Cho Phép"

headers.append("Content-Type", "application/x-www-form-urlencoded"); 

Tôi đã thử hai tiêu đề này.

headers.append("Authorization", "Basic " + btoa(Username + ":" + Password)); 
headers.append("Authorization", "Basic VXNlcm5hbWU6UGFzc3dvcmQ="); 

Điều duy nhất tôi có thể tìm thấy là trong tiêu đề yêu cầu RAW chỉ có một dòng với tên tiêu đề nhưng các giá trị bị thiếu:

Access-Control-Request-Headers: authorization, content-type 

header liệu:

#Request Headers 
OPTIONS /shipment HTTP/1.1 
Host: api.example.com 
Connection: keep-alive 
Access-Control-Request-Method: POST 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 
Access-Control-Request-Headers: authorization, content-type 
Accept: */* 
Referer: http://localhost:4200/address 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8,nl;q=0.6 

Hy vọng ai đó có thể giúp

Answer 1

Phiên bản đơn giản để thêm tiêu đề tùy chỉnh vào yêu cầu của bạn:

import {Injectable} from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 

@Injectable() 
export class ApiService { 

    constructor(private _http: Http) {} 

    call(url): Observable<any> { 
     let username: string = 'username'; 
     let password: string = 'password'; 
     let headers: Headers = new Headers(); 
     headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
     headers.append("Content-Type", "application/x-www-form-urlencoded"); 
     return this._http.post(url, data, {headers: headers}) 
    } 
} 

Thật khó để xác định nơi bạn đã đi sai, vì thiếu mã số thực tế http gọi cho bạn. Nhưng ví dụ này sẽ phù hợp với bạn

Answer 2

Tôi đã gặp sự cố tương tự trong đơn đăng ký của mình.

Như bạn có thể thấy yêu cầu đó là sended không POST nhưng OPTION (xác minh trước)

https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS

Bạn phải cho phép các tùy chọn yêu cầu ở bên cạnh API của bạn. Nếu bạn có ứng dụng Spring bạn chỉ có thể thêm video này vào cấu hình Spring Security:

protected void configure(HttpSecurity http) throws Exception { 
     http.csrf().disable() 
       .authorizeRequests() 
       **.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()** 
(..) 

} 

Trong trường hợp của tôi nó hoạt động

Answer 3

này giải quyết vấn đề của tôi:
Angular2 http post - how to send Authorization header?

Ok. Tôi đã tìm thấy vấn đề.

Nó không ở bên góc cạnh. Thành thật mà nói, không có vấn đề gì cả.

Lý do tại sao tôi không thể thực hiện yêu cầu của mình thành công là ứng dụng máy chủ của tôi không xử lý đúng yêu cầu OPTIONS.

Tại sao OPTIONS, không phải POST? Ứng dụng máy chủ của tôi nằm trên máy chủ khác, sau đó là giao diện người dùng. Do CORS trình duyệt của tôi đã được chuyển đổi POST để OPTION: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Với sự giúp đỡ của câu trả lời này: Độc lập xuân OAuth2 JWT Authorization Server + CORS

tôi thực hiện bộ lọc thích hợp trên ứng dụng server-side của tôi.

Nhờ @Supamiu - người đã cho tôi biết rằng tôi không gửi POST chút nào.

Answer 4

jrcastillo gợi ý một lựa chọn here

tôi đã dành rất nhiều giờ cố gắng để khắc phục điều này và một lót này giải quyết vấn đề của tôi.

@Override 
public void configure(WebSecurity web) throws Exception { 
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**"); 
} 

tôi là một chút cụ thể hơn trong các kết thúc như thế này thực /login con đường của tôi vì vậy tôi đã làm như sau thay vì:

@Override 
public void configure(WebSecurity web) throws Exception { 
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/api/**"); 
} 

Answer 5

Vấn đề là với máy chủ backend. Bất kỳ trình duyệt nào gửi yêu cầu preflight đều yêu cầu xuất xứ chéo. Máy chủ phụ trợ trong trường hợp này không xử lý thành công yêu cầu preflight. Hãy thử cấu hình cors trên máy chủ phụ trợ. Điều đó sẽ giải quyết vấn đề này.