Geek Answers Handbook

Redirect after sending a call

I am creating a social login page with an access control server (AM). When the user clicks the login button, I make a fetch mail call on the AM server. The AM server generates an HTTP 301 redirect response with cookies to the social login page. I need to somehow follow this redirect response and show new content in a web browser.

UI: ReactJS

Request:

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=...

Answer

 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

Change code:

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

How can I follow a redirect response and show new content in a web browser?

+17
source share
3 answers

Request.redirect can be "follow" , "error" or "manual" .

If this is “followed,” the fetch () API follows the redirect response (HTTP status code = 301, 302, 303, 307, 308).

If this is an “error”, the fetch () API treats the redirect response as an error.

If it is "manual", the fetch () API does not follow the redirect and returns an opaque-redirected filtered response that carries the redirect Response.

Since you want to redirect after extraction, just use it as

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

I have a similar problem, and I find the answer to the selection inside React is the same as for ajax inside JQuery - if you can find that the answer is a redirect, then update window.location.href with the .url answer

See for example: How to manage a redirect request after calling jQuery Ajax

Note that “if you can find that the answer is a redirect” can be a tricky part. Sampling responses may contain a redirect flag (see https://developer.mozilla.org/en-US/docs/Web/API/Response ), but I found that this is not the case in Chrome. I also found that in Chrome I have a response to the status of 200, and not the redirection status, but it could be something with our SSO implementation. If you are using fetch polyfill with IE, then you will need to check if response.url is enabled or not.

+3
source

Take a look at the properties redirected from the URL of the Response object: Doc says this

"Experimental. Expect behavior to change in the future."

The read-only url property of the Response interface contains the response URL. The value of the url property will be the final URL obtained after any redirects.

In my experiments, this 'url' property was exactly the same as the Location header value in Chrome (version 75.0.3770.100 (official build) (64-bit version)) of the network console.

The code to redirect the link looks like this:

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

I checked this by working with the response.js source code script with an AJAX call to call 302 redirects from the server.

PS In SPA applications, redirection responses are unlikely, which may be why ajax providers pay little attention to this functionality. See also these discussions: here here

0
source

More articles:


All Articles