Salvador Dali
Salvador Dali

Reputation: 222969

"CAUTION: provisional headers are shown" in Chrome debugger

I noticed a strange caution message when looking at downloaded resources using Google chrome inspector (F12):

Caution provisional headers are shown

enter image description here

I found something possibly relevant, Network Panel: add caution about provisional request headers, but I could not fully understand it. Related questions can be found Chrome block requests as well as XMLHttpRequest cannot load. Unloaded resources show caution: Provisional headers are shown.

Similar to the first question, my resource was blocked, but later automatically loaded the same resource. Unlike the second question, I don't want to fix anything; I want to know what this message means and why I received it.

Upvotes: 478

Views: 813736

Answers (30)

Rayan arnel
Rayan arnel

Reputation: 121

My problem was related to the improper use of data in an HTTP URL.

More specifically, I had neglected to encode an email address in Base64, which is essential to ensure its correct integration into an HTTP URL.

In the case of the email address, by inserting it as is, I risked encountering errors due to the presence of special characters like "@" or ".", which have specific meanings in the context of URLs.

Base64 strings are URL-safe, and that's why they can be used to encode data in Data URLs.

exemple in js :

let safeDataURL = encodeToBase64(email)

Upvotes: 0

Vijay Rana
Vijay Rana

Reputation: 1079

I was using LiteSpeed Cache Plugin in WordPress. There, I enabled Browser Caching. Disable this feature worked for me. Then, later I enabled it for improving performance.

Upvotes: 0

user2694064
user2694064

Reputation: 415

Try reloading the page with ctrl + shift +F5 and then check the request headers again

Full headers are not shown because there can be a chance that request is not going to the servers and instead is served directly from Browser's cache for example using service workers

Upvotes: 0

weichao
weichao

Reputation: 3421

The reason why this header shows is that: your request don't send to remote.

It usually caused by

  1. Extension has blocks your request
  2. Chrome use own cache to fetch your resource

Chrome cannot get your request headers from a request that haven't made.

A recent version of chrome has indicate these:

Only Provisional headers are avaliable because this request was not sent over the network and instead was served from a local cache, which doesn't store the original request headers.

Disable cache to see full request headers

Upvotes: 2

Abhas Bhoi
Abhas Bhoi

Reputation: 387

This could be a CORS issue. try enabling CORS for you api.

For WebApi

  var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);

Upvotes: 0

csandreas1
csandreas1

Reputation: 2388

I had this issue when sending parameters in the AJAX URL propertylike http://10.165.10.160:82/services?param1=xxxx&param2=xxxx

If you want to perform a get request (e.g. send parameterized url), do not add them in the url property, do it in data object instead:

        <script>
        $.ajax({
        url: "http://10.160.10.160:82/services/STD_ERROR.php",
        data: {
            StatusText: StatusText,
            Status: Status,
            UserCode: UserCode,
            FUNC_CODE: FuncCode,
            ErrorDescription: ErrorDescription
        },
        type: "GET",
        crossDomain: true,
        cache: false
    }).done(data => {
        console.log(data)
    }).fail(function(xhr, status, error) {
        console.log(xhr.ErrorDescription)
    });
</script>

Upvotes: 0

Willington Vega
Willington Vega

Reputation: 4872

The resource could be being blocked by an extension (AdBlock in my case).

The message is there because the request to retrieve that resource was never made, so the headers being shown are not the real thing. As explained in the issue you referenced, the real headers are updated when the server responds, but there is no response if the request was blocked.


The way I found about the extension that was blocking my resource was through the net-internals tool in Chrome:

For Latest Versions of chrome

  • Type chrome://net-export/ in the address bar and hit enter.
  • Start Recording. And save Recording file to local.
  • Open the page that is showing problems.
  • Go back to net-internals
  • You can view Recorded Log file Here https://netlog-viewer.appspot.com/#import
  • click on events (###) and use the textfield to find the event related to your resource (use parts of the URL).
  • Finally, click on the event and see if the info shown tells you something.

For Older Versions of chrome

  • Type chrome://net-internals in the address bar and hit enter.
  • Open the page that is showing problems.
  • Go back to net-internals, click on events (###) and use the textfield to find the event related to your resource (use parts of the URL).
  • Finally, click on the event and see if the info shown tells you something.

Upvotes: 431

Badr Elmers
Badr Elmers

Reputation: 1706

For chrome v72+ what solved it for me was only this:

go to chrome://flags/ and disable this 3 flags

  • Disable site isolation
  • Enable network service
  • Runs network service in-process

enter image description here

or you can do it from command line :

chrome --disable-site-isolation-trials --disable-features=NetworkService,NetworkServiceInProcess

why this happen?

It seems that Google is refactoring their Chromium engine into modular structure, where different services will be separated into stand-alone modules and processes. They call this process servicification. Network service is the first step, Ui service, Identity service and Device service are coming up. Google provides the official information at the Chromium project site.

is it dangerous to change that?

An example is networking: once we have a network service we can choose to run it out of process for better stability/security, or in-process if we're resource constrained. source

Upvotes: 47

onlynone
onlynone

Reputation: 8349

This can also happen (for cross-origin requests only) because of a new feature called site isolation

This page details the issue and a work-around. Which is to go to chrome://flags/#site-isolation-trial-opt-out in chrome and change that setting to "Opt-out" and reload chrome.

It's a known issue. However that page says it's fixed in chrome 68, but I'm running chrome 68 and I still have the issue.

Upvotes: 17

Tarmo
Tarmo

Reputation: 1276

In my case the cause was AdBlock extension.

The request to server went through and I got the response but I could not see the request cookies due to "Provisional headers.." being shown in Dev tools. After disabling AdBlock for the site, the warning went away and dev tools started to show the cookies again.

For the change to take effect, it was also necessary to close the Dev tools and refresh the page

Upvotes: 1

Frankjs
Frankjs

Reputation: 565

That might because you sent an Ajax request, at the same time you jump your page to another one using location.href or something like that. So the previous request failed.

Upvotes: 3

vikas etagi
vikas etagi

Reputation: 635

In my case, the body parameters I was sending in the post request, and logic I have writting depending on the body parameters were wrong, so the response was not able to be sent. so I was getting this error.

 example: post request body (a: alsldfjfj) which I was sending

but I had written the code for validating "b" instead of "a"

Upvotes: -1

LCB
LCB

Reputation: 1050

This issue will also occur while using some packages like webpack-hot-middleware and open multiple pages at the same time. webpack-hot-middleware will create a connection for each page for listening to the changes of code then to refresh the page. Each browser has a max-connections-per-server limitation which is 6 for Chrome, so if you have already opened more than 6 pages in Chrome, the new request will be hung there until you close some pages.

Upvotes: 0

Alessia
Alessia

Reputation: 959

My situation is cross-origin related.
Situation: Browser sends OPTIONS request before sending the real request like GET or POST. Backend developer forgets to deal with the OPTIONS request, letting it go through the service code, making the processing time too long. Longer than the timeout setting I wrote in the axios initialization, which is 5000 milliseconds. Therefore, the real request couldn't be sent, and then I encountered the provisional headers are shown problem.
Solution: When it comes to OPTIONS request, backend api just return result, it makes the request faster and the real request can be sent before timeout.

Upvotes: 19

Nabi K.A.Z.
Nabi K.A.Z.

Reputation: 10734

Use this code fist of your code:

header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

This works for me.

Upvotes: 3

chank
chank

Reputation: 3636

I had a similar issue with my MEAN app. In my case, the issue was happening in only one get request. I tried with removing adblock, tried clearing cache and tried with different browsers. Nothing helped.

finally, I have figured out that the api was trying to return a huge JSON object. When I have tried to send a small object, it was working fine. Finally, I have changed my implementation to return a buffer instead of a JSON.

I wish expressJS to throw an error in this case.

Upvotes: 0

Rafal Cypcer
Rafal Cypcer

Reputation: 597

"Caution: provisional headers are shown" message can be shown when website hosted on HTTPS invokes a calls to WebApi hosted on HTTP. You can check all if all your Api's are HTTPS. Browser prevents to do a call to insecure resource. You can see similar message in your code when use FETCH API to domain with HTTP.

Mixed Content: The page at 'https://website.com' was loaded over HTTPS, but requested an insecure resource 'http://webapi.com'. This request has been blocked; the content must be served over HTTPS.

Upvotes: 1

mab
mab

Reputation: 810

I saw this occur when the number of connections to my server exceeded Chrome's max-connections-per-server limit of 6.

Upvotes: 1

Robert Christopher
Robert Christopher

Reputation: 469

This issue occurred to me when I was sending an invalid HTTP Authorization header. I forgot to base64 encode it.

Upvotes: 3

user742030
user742030

Reputation:

HTTP/2 Pushed resources will produce Provisional headers are shown in the inspector for the same theory as @wvega posted in his answer above.

e.g: Since the server pushed the resource(s) to the client (before the client requested them), the browser has the resources cached and therefore the client never makes/needs a requests; So because...

...the real headers are updated when the server responds, but there is no response if the request was blocked.

Upvotes: 12

dionyziz
dionyziz

Reputation: 2462

This message can occur when the website is protected using HSTS. Then, when someone links to the HTTP version of the URL, the browser, as instructed by HSTS, does not issue an HTTP request, but internally redirects to the HTTPS resource securely. This is to avoid HTTPS downgrade attacks such as sslstrip.

Upvotes: 6

typocoder
typocoder

Reputation: 395

In my case it was just a false set path in to a resource (svg / img)

Upvotes: 2

codingbiz
codingbiz

Reputation: 26396

If you are developing an Asp.Net Mvc application and you are trying to return a JsonResult in your controller, make sure you add JsonRequestBehavior.AllowGet to the Json method. That fixed it for me.

public JsonResult GetTaskSubCategories(int id)
{
    var subcategs = FindSubCategories(id);

    return Json(subcategs, JsonRequestBehavior.AllowGet);  //<-- Notice it has two parameters
}

Upvotes: 0

bigtex777
bigtex777

Reputation: 1240

A common reason this happens is if you are tracking an event and you don't prevent the default action. For example, if you have a click event, then you will want to include:

e.preventDefault();

or

return false;

If you don't, you will see the provisional headers warning as well as a "canceled" status in the Network tab of your web console.

Upvotes: 3

Arnau Galofr&#233;
Arnau Galofr&#233;

Reputation: 11

I got this error when I tried to print a page in a popup. The print dialog was show and it still waiting my acceptance or cancellation of the printing in the popup while in the master page also was waiting in the background showing the message CAUTION provisional headers are shown when I tried to click another link.

In my case the solution was to remove the window.print (); script that it was executing on the <body> of the popup window to prevent the print dialog.

Upvotes: 1

Hayk Aghabekyan
Hayk Aghabekyan

Reputation: 1087

This was happening for me, when I had a download link and after clicking on it I was trying also to catch the click with jquery and send an ajax request. The problem was because when you are clicking on the download link, you are leaving the page, even it does not look so. If there would no file transfer, you would see the requested page.. So I set a target="_blank" for preventing this issue.

Upvotes: 1

Gwi7d31
Gwi7d31

Reputation: 1782

I've had this come up very recently (today in fact) where I've had an AJAX call go out to the server and Chrome fires off the "Caution: Provisional headers are shown." In the server side PHP scripting, there are MySQL queries that can be pretty much instant or take a few seconds depending on the given scenario. My server response isn't sent back to the browser until the queries are completed. I've found I get this error only when time consuming queries (up to a few seconds total) are being done and prevent the response from being sent back.

My scenario involves the very rare possibility of having to alter a table by adding/removing hundreds of columns for weather model output...hence the response lag from iterating through a loop of ALTER TABLE queries.

Upvotes: 2

Erez Cohen
Erez Cohen

Reputation: 1527

Another possible scenario I've seen - the exact same request is being sent again just after few milliseconds (most likely due to a bug in the client side).
In that case you'll also see that the status of the first request is "canceled" and that the latency is only several milliseconds.

Upvotes: 1

Ohad Sadan
Ohad Sadan

Reputation: 917

I ran this issue when I tried to load main.js for require js for the second time after I made changes as a result from error . I just turned on in Developer Tools Settings "Disable Cache (When DevTools is Open)" . and that did the charm.

Upvotes: 1

jimp
jimp

Reputation: 17477

I ran into this issue with an AJAX call that would never complete. I followed wvega's advice and tip about debugging with chrome://net-internals to eventually determine another click event handler in the page, listening on a parent node, was causing the browser to navigate to the same URL (so it wasn't easily noticeable).

The solution was to add event.stopPropagation() in a click handler on the form submit button to keep the click from bubbling up the DOM and canceling the AJAX request in progress (initiated via a submit handler on the form).

Upvotes: 2

Related Questions