Chrome은 뒤로 버튼을 누르면 Ajax 응답을 표시합니다.

Chrome은 뒤로 버튼을 누르면 Ajax 응답을 표시합니다.

jQuery의 Get 메서드를 사용하여 콘텐츠를 가져오면 실제로 한 페이지 이전으로 돌아가지 않고 다시 클릭하면 Ajax 쿼리에 의해 반환된 콘텐츠가 표시됩니다.

생각나는 거 없어?

http://www.dameallans.co.uk/preview/allanian-society/news/56/Allanian-test

위 페이지에서 페이지 변경 후 다시 클릭할 때 아래 페이지 번호를 사용하면 댓글 목록을 생성하기 위해 사용된 HTML 콘텐츠가 표시됩니다.

항상 그렇게 되는 것은 아니지만, 다른 페이지를 몇 번 클릭하여 뒤로 버튼을 클릭하면 웹사이트가 아닌 창에 json 텍스트가 표시됩니다.

IE와 Firefox가 정상적으로 동작하기 때문에 Chrome에만 영향을 줍니다.

AJAX 요청은 전체 HTML 문서와 다른 URL을 사용해야 합니다.Chrome은 최근 요청이 일부라도 캐시합니다.

https://code.google.com/p/chromium/issues/detail?id=108425

jQuery with History API(또는 history.js와 같은 일부 라이브러리)를 사용하는 경우 $.getJ를 변경해야 합니다.캐시가 false로 설정된 상태에서 $.ajax로 SON:

$.ajax({
    dataType: "json",
    url: url,
    cache: false,
    success: function (json) {...}
});

사실 이것은 사양에 따른 캐싱 시스템의 예상 동작이며 크롬 문제가 아닙니다.캐시는 요청 헤더가 아닌 URL 및 요청 메서드(get, post, ...)에 따라 요청을 구분합니다.

그러나 브라우저에 캐시를 확인할 때 몇 가지 헤더를 고려하도록 지시하는 Vary 헤더가 있습니다.예를 들어 서버 응답에 Vary:X-Requested-With를 추가하면 브라우저는 요청 X-Requested-With 헤더가 변경되면 이 응답이 변경됨을 알 수 있습니다.또는 Variate를 추가해 주세요.서버 응답에 대한 Content-Type 요청 Content-Type 헤더가 변경되면 브라우저는 이 응답이 변경됨을 인식합니다.

PHP용으로 라우터에 다음 행을 추가할 수 있습니다.

header('Vary:X-Requested-With');

node.js에서 미들웨어를 사용합니다.

app.use(function(req, res) {
    res.header('Vary', 'X-Requested-With');
});

또한 임의 값을 ajax URL 끝에 추가할 수도 있습니다.이전 크롬 캐시를 무시하고 새 버전을 요청합니다.

url = '/?'+Math.random()

Response 헤더에 다음 헤더를 추가합니다.

Vary: Accept

각 Ajax 요청에 대해 다른 URL을 제공할 수 없었습니다.이는 Ajax 페이지화였기 때문에 헤더에 캐시가 아무것도 하지 않았다고 선언했기 때문에, 저는 헤더가 Ajax 요청을 위한 경우에만 뷰에 약간의 javascript를 포함시켰습니다.

<script>
if (typeof jQuery == 'undefined') {
    window.location = "<?php echo $this->here; ?>";
}
</script>

이것은 지저분한 속임수이지만 효과가 있습니다.Ajax 콘텐츠가 정상적으로 로드되면 컨테이너에 Jquery가 로드되므로 아무것도 하지 않습니다.그러나 주변 콘텐츠 없이 ajax 추정 콘텐츠를 로드하면 Jquery가 누락되므로(적어도 내 경우), 헤더와 스크립트가 모두 포함된 일반 GET 페이지를 요청하는 현재 페이지로 수정합니다.

페이지 상단에 배치하면 페이지가 로드될 때까지 기다리지 않기 때문에 사용자는 알아차리지 못하고 브라우저가 이 4줄을 받는 즉시 리다이렉트됩니다.

여기서 대체해 주세요.?>는 현재 앱 URL로 CakePhp 2.X였습니다.

2021년에도 크롬에서 이 문제가 발생하였습니다.

사용자가 현재 있는 URL과 동일한 URL에 대한 기본 Ajax 요청을 수행하는 데 문제가 있습니다.Symfony에서 일하던 중, 제게 가장 큰 도움이 된 것은

$response->headers->addCacheControlDirective('no-cache', true);
$response->headers->addCacheControlDirective('max-age', 0);
$response->headers->addCacheControlDirective('s-maxage', 0);
$response->headers->addCacheControlDirective('must-revalidate', true);
$response->headers->addCacheControlDirective('no-store', true);

/**
 * from https://stackoverflow.com/a/1975677/5418514
 *
 * The HTTP request header 'Accept' defines the Content-Types a client can process.
 * If you have two copies of the same content at the same URL, differing only in Content-Type,
 * then using Vary: Accept could be appropriate.
 */
$response->headers->set('Vary', 'Accept');

@abraham의 답은 옳다.Rails용 솔루션을 게시하고 싶습니다.필요한 것은 다른 경로를 추가하는 것 뿐입니다.routes.rb.

예를 들어, 저는resource :people그리고 나는 ajax 파트에서 인덱스 페이지를 만들고 싶다. 그 중 하나는 사람 리스트이다.간단한 방법은,index.js.erbAjax를 통해 부분 로드하기 위해url: people_path여기서 문제가 발생합니다.

따라서 Rails의 경우 다른 경로를 추가하면 됩니다.

get 'people_list', to: 'people#index', as: :people_list, format: :js

larabel 컨트롤러의 인덱스 메서드를 사용하면 html과 json 응답이 모두 반환되는 경우 브라우저 캐시를 전달하기 위해 엔드포인트 끝에 get 파라미터를 추가합니다.

axios.get(url, {params: {ajax: 1}})

언급URL : https://stackoverflow.com/questions/9956255/chrome-displays-ajax-response-when-pressing-back-button