<p dir="auto">Hi,</p>
<p dir="auto">I´m working in a laravel app and i´m trying to make a post request from a Vue JS component like laravel method, so when i make the post request i would like the app go to the url received from the laravel controller on the http post response. I have the next code in my vue JS component methods:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="submit: function() {

                const data = {
                    name: this.name,
                 
                };

                console.log('submit!')
                this.$v.$touch()
                if (this.$v.$invalid) {
                    this.submitStatus = 'ERROR'
                } else {

                    let currentObj = this;
                    axios.post('/group', data).then(function (response) {
                        currentObj.output = response.data;
                    }).catch(function (error) {
                        currentObj.output = error;
                    });

                }
            },"><pre class="notranslate"><code class="notranslate">submit: function() {

                const data = {
                    name: this.name,
                 
                };

                console.log('submit!')
                this.$v.$touch()
                if (this.$v.$invalid) {
                    this.submitStatus = 'ERROR'
                } else {

                    let currentObj = this;
                    axios.post('/group', data).then(function (response) {
                        currentObj.output = response.data;
                    }).catch(function (error) {
                        currentObj.output = error;
                    });

                }
            },
</code></pre></div>
<p dir="auto">When i execute the code, the post request is done, i have the data sent on my database tables, however, the application is not redirected as i expect.</p>
<p dir="auto">How the app can be redirected to the URL returned on laravel controller method?</p>
<h4 dir="auto">Summary</h4>
<p dir="auto">We have a single page app based on Vue.js which uses Axios to make API calls.  When a user's session expires, API calls start returning a 302 redirect to the login page.  Since its a single page app, sometimes users may just browse around directly in the app, therefore only making AJAX calls and not reloading the main index.html file.</p>
<p dir="auto">When this happens, the 302's are basically swallowed and the user is not redirected and the app breaks.</p>
<p dir="auto">To complicate matters a bit further, the login page is based on a federated login service in Azure, so it's on a different domain.  This causes the browser to throw the following CORS error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="XMLHttpRequest cannot load login.microsoftonline.com. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access."><pre class="notranslate"><code class="notranslate">XMLHttpRequest cannot load login.microsoftonline.com. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.
</code></pre></div>
<p dir="auto">I tried to use an interceptor but the error.response object is undefined, so I cannot even tell what the HTTP status of the response was.  So the best I can come up with is that when error.response is undefined to assume it was a 302 and assume I need to forward the user to the login page:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="axios.interceptors.response.use((response) =&gt; {
  return response
}, (error) =&gt; {
  // we can't seem to catch the 302 status code as an error,
  // however, since it redirects to another domain (login.microsoftonline.com) it causes
  // a CORS error which makes error.response be undefined here.  This assumes that any time
  // error.response is undefined that we need to redirect to the login page
  if (typeof error.response === 'undefined') {
    window.location = 'https://login.microsoftonline.com'
  } else {
    return Promise.reject(error)
  }
})"><pre class="notranslate"><code class="notranslate">axios.interceptors.response.use((response) =&gt; {
  return response
}, (error) =&gt; {
  // we can't seem to catch the 302 status code as an error,
  // however, since it redirects to another domain (login.microsoftonline.com) it causes
  // a CORS error which makes error.response be undefined here.  This assumes that any time
  // error.response is undefined that we need to redirect to the login page
  if (typeof error.response === 'undefined') {
    window.location = 'https://login.microsoftonline.com'
  } else {
    return Promise.reject(error)
  }
})
</code></pre></div>
<p dir="auto">Is this the best we can do?  Any further suggestions?</p>
<h4 dir="auto">Context</h4>
<ul dir="auto">
<li>Vue.js, vue-router single page app</li>
<li>axios version: <em>v0.16.0</em></li>
<li>Environment: <em>chrome 58, windows 10</em></li>
</ul>