Used with prerender spa plugin returns 400 error

Hello, I’m using a prerendering plugin (prerender spa plugin). I got this error in console :

GET https://www.google.com/recaptcha/api/fallback?k=6Ld3CSMUAAAAANACpzW7Eef98DqcasUKWmMDrRjk&hl=en&v=r20170524165316&t=1&ff=true 400 ()

The network inspector returns :

Please enable JavaScript to get a reCAPTCHA challenge.

This seems not to work when prerendering. Is there any way to make it work ? Thanks

[esmsnt]

I had a similar issue with prerender-spa-plugin. I recommend you run a quick post-processing on the prerender-spa-plugin output and strip out the recaptcha script tags. Your Vue instance will re-insert them when it takes over from the pre-rendered page. Here is what I used in my prod webpack file:

Ignore the stuff about toasted-vue, that also causes a problem if it renders a toast inside the phantomjs prerender. You will need to install cheerio (npm --save install cheerio ).

    // Recommended for SEO  http://vuejs-templates.github.io/webpack/prerender.html
    // https://www.npmjs.com/package/prerender-spa-plugin
    // Be sure to add this https://github.com/chrisvfritz/prerender-spa-plugin/pull/54
    // Otherwise PhantomJS polyfill does not get injected
    new PrerenderSpaPlugin(
      // Path to compiled app
      path.join(__dirname, '../dist'),
      // List of endpoints you wish to prerender
      [ '/', '/terms', '/privacy', '/contact' ],
      {
        captureAfterTime: 10000,
        navigationLocked: true,
        postProcessHtml: function (context) {
          // Post Process the static rendered HTML to clean up some issues
          var $ = cheerio.load(context.html)
          // Remove cookie notification popup
          //  <div id="toasted-container" class="bottom-right"> ... </div>
          $('#toasted-container').remove()
          // Remove recaptcha script tags
          //  <script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/api2/r20170629165701/recaptcha__en.js"></script>
          //  <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&amp;render=explicit" async="" defer="" data-vue-meta="true"></script>
          var recaptchaRegex = /recaptcha/i
          $('head').find('script').each(function (i, elem) {
            if (recaptchaRegex.test($(this).attr('src'))) {
              $(this).remove()
            }
          })
          return $.html()
        }
      }

You may also find that setting navigationLocked=true seems to fix the recaptcha most of the time…

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.