0

I have a contact page in Rails that runs an Angular 6 application,

<% content_for :content_title, "Contact Us" %>

<% content_for :metatags do %>
  <!-- This is to get rid of "Zone already loaded error" from a combination of Angular and Turbolinks' doing-->
  <meta name="turbolinks-visit-control" content="reload">
<% end %>

<% content_for :scripts do %>
  <%= javascript_pack_tag 'contact',
        "data-turbolinks-track": "reload" %>
<% end %>

<%= render "pages/layout" do %>
  <% content_for :title, "Contact Us" %>
  <div class="divider"></div>

  <div class="container" style="max-width: 800px;">
    <div class="section">
      <div class="card-panel">
        <contact>Loading...</contact>
      </div>
    </div>
  </div>
<% end %>

Everything works as expected from the surface, but I observed the following behavior,

  • Going from other pages that don't run Angular apps (e.g. home to about), everything is working as expected,
  • Landing directly on /contact (typing in localhost:3000/contact in the browser and hit enter) is working as expected,

However,

  • Navigating to /contact from some other page results in two requests to /contact,

  • Navigating away from /contact, say to the root path /, results in two requests to /,

Subsequent requests are okay again.

I'm certain this has something to do with turbolinks, but I'm don't understand it enough to pinpoint exactly what's happening here.

Adding data-turbolinks="false" resolves the issue of duplicate requests to /contact, but the duplicate requests as a result of navigating away from /contact persists.

<%= link_to "Contact", contact_path, data: { turbolinks: false } %>

An additional observation, which is about the "Accept" header. With the normal, single requests, the "Accept" header is,

"accept": text/html, application/xhtml+xml

With the duplicate requests, the first header is,

"accept": text/html, application/xhtml+xml

And the second header is,

"accept": text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

If anyone can enlighten me as to what's going on here, I would appreciate it greatly. This behavior is observed on both Chrome and Safari, and is observed in a production build on Heroku as well, so it's not limited to development setup.

treble_maker
  • 193
  • 1
  • 12
  • Is same domain? maybe it's perhaps it is [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) caused – Chunbin Li Jun 23 '18 at 02:49
  • @ChunbinLi The Angular application is served at a different local host port, but both requests to /contact should be under the same domain - is that what you're referring to? – treble_maker Jun 23 '18 at 03:00
  • If CORS causes it then first send an HTTP request by the [OPTIONS method](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Functional_overview) – Chunbin Li Jun 23 '18 at 03:07
  • @ChunbinLi Oh I see what you were getting at. Both of the requests were GET requests. – treble_maker Jun 23 '18 at 03:17

0 Answers0