Fetch Post 콜 후 리다이렉트

Fetch Post 콜 후 리다이렉트

Access Management(AM) 서버에서 소셜 로그인 페이지를 만들고 있습니다.사용자가 로그인 버튼을 클릭하면 AM 서버에 대해 fetch http post 콜을 발신합니다.AM 서버는 소셜 로그인 페이지에 대한 인증 쿠키를 사용하여 HTTP 301 리다이렉트 응답을 생성합니다.어떻게든 이 리다이렉트 응답을 팔로우하여 새로운 콘텐츠를 웹 브라우저에 표시해야 합니다.

UI: 반응JS

요청:

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

대답

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

반응 코드:

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

리다이렉트 응답을 추적하여 웹 브라우저에 새 콘텐츠를 표시하려면 어떻게 해야 합니까?

Request.redirect는 다음과 같습니다."follow","error" ★★★★★★★★★★★★★★★★★」"manual".

"follow"일 경우 fetch() API는 리다이렉트 응답을 따릅니다(HTTP 상태 코드= 301,302,307,308).

"error"일 경우 fetch() API는 리다이렉트 응답을 오류로 간주합니다.

수동일 경우 fetch() API는 리다이렉트를 따르지 않고 리다이렉트 응답을 랩하는 불투명 리다이렉트필터링 응답을 반환합니다.

취득 후에 리다이렉트 하는 경우는, 다음과 같이 사용합니다.

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

Response 객체의 리다이렉트된 속성 URL을 확인합니다.의사 선생님이 그러는데

"실험적이야.향후 동작이 변화할 것으로 예상합니다.

응답 인터페이스의 url 읽기 전용 속성에는 응답 URL이 포함됩니다.URL 속성의 값은 리다이렉트 후에 취득되는 최종 URL이 됩니다.

제 실험에서 이 'url' 속성은 Chrome의 Location 헤더 값과 정확히 동일했습니다(Version 75.0.3770.100(Official Build)(64비트)네트워크 콘솔

리다이렉트 처리 코드는 다음과 같이 링크됩니다.

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

서버로부터의 리다이렉트 302를 향해서 AJAX 콜을 수신하는 react.js same-origin 스크립트를 사용해 테스트했습니다.

추신: SPA 앱에서는 리다이렉트 응답이 거의 없기 때문에 아마 이것이 Ajax 벤더가 이 기능에 거의 주의를 기울이지 않는 이유일 것입니다.자세한 내용은 이쪽도 참조해 주세요.

javascript에서는 새로운 HTML 페이지로 리다이렉트 할 수 없습니다.

fetch(url, { method: 'POST', redirect: "follow" });

는 단순히 브라우저가 렌더링하지 않고 데이터로 반환되는 리다이렉트된 로케이션에 대한 다른 요청을 수행합니다. 하다 보면 아마 쓸 수 예요.{ redirect : "manual" }응답에서 리다이렉트된 위치를 가져와 Javascript를 사용하여 페이지로 이동하지만 리다이렉트된 위치가 반환되지 않습니다.https://github.com/whatwg/fetch/issues/763 를 참조하십시오.

비슷한 문제가 있습니다.React 내에서의 fetch inside의 답변은 JQuery 내에서의 ajax의 답변과 같다고 생각합니다.응답이 리다이렉트임을 검출할 수 있다면 window.location을 갱신해 주세요.href 및 response.url

예를 들어 다음과 같습니다.jQuery Ajax 호출 후 리다이렉트 요청을 관리하는 방법

'응답이 리디렉션임을 감지할 수 있는 경우'가 까다로운 부분일 수 있습니다.fetch 응답에는 'fetch' 플래그가 포함되어 있을 수 있습니다(https://developer.mozilla.org/en-US/docs/Web/API/Response) 참조). Chrome에서는 그렇지 않습니다.Chrome에서는 리다이렉트 상태가 아닌 상태 응답이 200으로 표시되지만, 이는 SSO 구현의 문제일 수 있습니다.IE에서 fetch polyfill을 사용하는 경우 response.url이 포함되어 있는지 확인해야 합니다.

이 시나리오의 솔루션은 서버에서 리다이렉트를 사용하는 대신 파라미터로 리다이렉트하고 싶은 URL을 전송하고 바디 응답으로 수신하는 것이었습니다.

fetch를 사용하여 URL로 리다이렉트를 시도했지만 이 방법이 작동하지 않아 다른 방법을 사용하여 리다이렉트를 실행하게 되었습니다.반응 컴포넌트 내부에서 다음 단계를 수행합니다.

• 1단계: 상태 변수 생성:

const [_id,setID]=useState('')

• 스텝 2: 상태를 갱신하는 메서드를 만듭니다.

function uidValue(event) {
        const endpoint = '/api/users/'+ event.target.value // this will be your url, so set it right.
        setID(endpoint)
    }

• 순서 3: 컴포넌트의 반환 섹션에서onChange사용자 이름(이 경우 ID):

<input id="uid" type="text" name=":_id" placeholder=":_id" onChange={uidValue} />

• 순서 4: 입력 내용이 모두 폼 내에 있는지 확인하고,action의 탓으로 돌리다form태그: 자신의 상태를 사용하여 네비게이트할 URL을 설정합니다.

<form  action={_id} id="login info" method="post" >

Fetch는 리다이렉트 URL을 취득할 수 없지만 XMLHttpRequest는 취득할 수 있습니다.

리다이렉트 URL 을 취득하려면 , 다음의 코드를 사용해 주세요.

const xhr = new XMLHttpRequest();

xhr.open("GET", "/api/auth/socialauth/initiate");

xhr.send();

xhr.onreadystatechange = function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseUR);
    this.abort();
  }
};

언급URL : https://stackoverflow.com/questions/39735496/redirect-after-a-fetch-post-call