chuyển hướng sau khi tìm nạp bài gọi

Question

Tôi đang tạo trang đăng nhập xã hội bằng máy chủ Quản lý truy cập (AM). Khi người dùng nhấp vào nút đăng nhập thì tôi thực hiện tìm nạp http gửi đến máy chủ AM. Máy chủ AM tạo ra phản hồi chuyển hướng HTTP 301 với cookie xác thực đến trang đăng nhập xã hội. Tôi cần phải làm theo cách nào đó phản ứng chuyển hướng này và hiển thị nội dung mới trong trình duyệt web.

UI: ReactJS

Yêu cầu:

POST /api/auth/socialauth/initiate HTTP/1.1 
Host example.com 
User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0) 
Accept */* 
Accept-Language en-US,en;q=0.5 
Accept-Encoding gzip, deflate 
origin http://web.example.com:8080 
Referer http://web.example.com:8080/myapp/login 
Cookie authId=...; NTID=... 

đáp ứng

HTTP/1.1 307 Temporary Redirect 
https://www.facebook.com/dialog/oauth?client_id=...&scope=public_profile%2Cemail&redirect_uri=http%3A%2F%2Fam.example.com%3A8083%2Fopenam%2Foauth2c%2FOAuthProxy.jsp&response_type=code&state=qtrwtidnwdpbft4ctj2e9mv3mjkifqo 

Phản ứng mã:

initiateSocialLogin() { 
    var url = "/api/auth/socialauth/initiate"; 

    fetch(url, { method: 'POST' }) 
     .then(response => { 
      // HTTP 301 response 
      // HOW CAN I FOLLOW THE HTTP REDIRECT RESPONSE? 
     }) 
     .catch(function(err) { 
      console.info(err + " url: " + url); 
     }); 
} 

Làm thế nào tôi có thể làm theo các phản ứng chuyển hướng và hiển thị các nội dung mới trong web bro wser?

Answer 1

Request.redirect có thể là "follow", "error" hoặc "manual".

Nếu nó "theo dõi", fetch() API tuân theo phản hồi chuyển hướng (HTTP mã trạng thái = 301,302,303,307,308).

Nếu đó là "lỗi", tìm nạp() API xử lý phản hồi chuyển hướng dưới dạng lỗi .

Nếu nó là "thủ công", fetch() API không thực hiện theo chuyển hướng và trả về phản hồi được lọc chuyển hướng mờ kết thúc phản hồi chuyển hướng .

Vì bạn muốn chuyển hướng sau một Truy xuất chỉ sử dụng nó như

fetch(url, { method: 'POST', redirect: 'follow'}) 
    .then(response => { 
     // HTTP 301 response 
    }) 
    .catch(function(err) { 
     console.info(err + " url: " + url); 
    }); 

Answer 2

Tôi có một vấn đề tương tự và tôi tin rằng câu trả lời cho lấy bên trong Phản ứng cũng giống như nó là dành cho ajax trong JQuery - nếu bạn có thể phát hiện rằng câu trả lời là một chuyển hướng, sau đó cập nhật window.location.href với response.url

Xem ví dụ: How to manage a redirect request after a jQuery Ajax call

Lưu ý rằng 'nếu y Bạn có thể phát hiện ra rằng phản hồi là một chuyển hướng 'có thể là một phần khó khăn. Tìm nạp câu trả lời có thể chứa cờ 'được chuyển hướng' (xem https://developer.mozilla.org/en-US/docs/Web/API/Response) nhưng tôi thấy rằng không phải như vậy trong Chrome. Tôi cũng tìm thấy trong Chrome tôi nhận được phản hồi trạng thái 200 thay vì trạng thái chuyển hướng - nhưng đó có thể là điều gì đó với việc triển khai SSO của chúng tôi. Nếu bạn đang sử dụng một tìm nạp polyfill với IE thì bạn sẽ cần phải kiểm tra xem response.url có được bao gồm hay không.