CORS: chế độ thông tin xác thực là 'bao gồm'

Vâng, tôi biết bạn đang nghĩ gì - một câu hỏi khác của CORS, nhưng lần này tôi bối rối.

Vì vậy, để bắt đầu, thông báo lỗi thực tế:

XMLHttpRequest không thể tải http: //localhost/Foo.API/token . Giá trị của tiêu đề 'Access-Control-Allow-Origin' trong phản hồi không được là ký tự đại diện '*' khi chế độ thông tin xác thực của yêu cầu là 'bao gồm' . Nguồn gốc ' http: // localhost: 5000 ' do đó không được phép truy cập. Chế độ thông tin xác thực của các yêu cầu do XMLHttpRequest khởi xướng được kiểm soát bởi thuộc tính withCredentials.

Tôi không chắc ý nghĩa của chế độ thông tin xác thực là 'bao gồm' ?

Vì vậy, khi tôi thực hiện yêu cầu trong bưu tá, tôi không gặp phải lỗi như vậy:

Nhưng khi tôi truy cập cùng một yêu cầu thông qua ứng dụng web anglejs của mình, tôi đã bị lỗi này. Đây là yêu cầu / phản hồi angualrjs của tôi. Như bạn sẽ thấy phản hồi là vậy OK 200, nhưng tôi vẫn nhận được lỗi CORS:

Yêu cầu và phản hồi của Fiddler:

Hình ảnh sau minh họa yêu cầu và phản hồi từ giao diện người dùng web tới API

Vì vậy, dựa trên tất cả các bài viết khác mà tôi đã đọc trên mạng, có vẻ như tôi đang làm đúng, đó là lý do tại sao tôi không thể hiểu lỗi. Cuối cùng, đây là mã tôi sử dụng trong angualrjs (nhà máy đăng nhập):

Triển khai CORS trong API - Mục đích tham khảo:

Phương pháp 1 được sử dụng:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*", "*")
        {
            SupportsCredentials = true
        };
        config.EnableCors(cors);
    }
}

Phương pháp 2 được sử dụng:

public void Configuration(IAppBuilder app)
{
    HttpConfiguration config = new HttpConfiguration();

    ConfigureOAuth(app);

    WebApiConfig.Register(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.UseWebApi(config);

}

Rất cám ơn trước!

Vấn đề bắt nguồn từ mã Angular của bạn:

Khi withCredentialsđược đặt thành true, nó đang cố gắng gửi thông tin xác thực hoặc cookie cùng với yêu cầu. Vì điều đó có nghĩa là một nguồn gốc khác có khả năng đang cố gắng thực hiện các yêu cầu được xác thực, ký tự đại diện ("*") không được phép làm tiêu đề "Access-Control-Allow-Origin".

Bạn sẽ phải trả lời rõ ràng nguồn gốc thực hiện yêu cầu trong tiêu đề "Access-Control-Allow-Origin" để làm cho điều này hoạt động.

Tôi khuyên bạn nên đưa nguồn gốc vào danh sách trắng một cách rõ ràng mà bạn muốn cho phép thực hiện các yêu cầu được xác thực, bởi vì chỉ cần phản hồi với nguồn gốc từ yêu cầu có nghĩa là bất kỳ trang web nhất định nào cũng có thể thực hiện các cuộc gọi đã xác thực đến phần phụ trợ của bạn nếu người dùng tình cờ có phiên hợp lệ.

Tôi giải thích điều này trong bài viết này tôi đã viết một thời gian trước.

Vì vậy, bạn có thể đặt withCredentialsthành false hoặc triển khai danh sách trắng nguồn gốc và phản hồi các yêu cầu CORS với nguồn gốc hợp lệ bất cứ khi nào liên quan đến thông tin đăng nhập

Nếu bạn đang sử dụng phần mềm trung gian CORS và bạn muốn gửi withCredentialsboolean true, bạn có thể định cấu hình CORS như sau:

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:5000'}));

`

Tùy chỉnh CORS cho Angular 5 và Spring Security (Giải pháp cơ sở cookie)

Về phía Angular, yêu cầu thêm cờ tùy chọn withCredentials: trueđể truyền Cookie:

constructor(public http: HttpClient) {
}

public get(url: string = ''): Observable<any> {
    return this.http.get(url, { withCredentials: true });
}

Ở phía máy chủ Java, yêu cầu thêm CorsConfigurationSourcecho chính sách CORS cấu hình:

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        // This Origin header you can see that in Network tab
        configuration.setAllowedOrigins(Arrays.asList("http:/url_1", "http:/url_2")); 
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        configuration.setAllowedHeaders(Arrays.asList("content-type"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()...
    }
}

Phương pháp configure(HttpSecurity http)theo mặc định sẽ sử dụng corsConfigurationSourcechohttp.cors()

Nếu nó hữu ích, tôi đang sử dụng ly tâm với ứng dụng reactjs của mình và sau khi kiểm tra một số nhận xét bên dưới, tôi đã xem tệp thư viện centrifuge.js, trong phiên bản của tôi, có đoạn mã sau:

if ('withCredentials' in xhr) {
 xhr.withCredentials = true;
}

Sau khi tôi xóa ba dòng này, ứng dụng đã hoạt động tốt, như mong đợi.

Hy vọng nó giúp!

Nếu bạn đang sử dụng .NET Core, bạn sẽ phải .AllowCredentials () khi định cấu hình CORS trong Startup.CS.

Bên trong của ConfigureServices

services.AddCors(o => {
    o.AddPolicy("AllowSetOrigins", options =>
    {
        options.WithOrigins("https://localhost:xxxx");
        options.AllowAnyHeader();
        options.AllowAnyMethod();
        options.AllowCredentials();
    });
});

services.AddMvc();

Sau đó, bên trong Cấu hình:

app.UseCors("AllowSetOrigins");
app.UseMvc(routes =>
    {
        // Routing code here
    });

Đối với tôi, nó chỉ là thiếu tùy chọn.AllowCredentials () gây ra lỗi bạn đã đề cập. Như một lưu ý phụ nói chung đối với những người khác cũng gặp vấn đề về CORS, các vấn đề về thứ tự và AddCors () phải được đăng ký trước AddMVC () bên trong lớp Khởi động của bạn.