CODEWITHSUNDEEP
node.jsapinginxvue.jsaxios
Paul Connolly
Paul Connolly

Reputation: 319

how to make Nodejs redirect work when called via Vuejs

I have created and tested the POST and GET request methods in Nodejs such that I can send the user through the Gocardless sign-up API perfectly fine.

This is a sign-up form provided by their API which allows them to input their details and then returns the user back after they fill it in.

But when I set up a front-end using Vuejs and make the same calls previously made from the back end using Axios, it seems that because the "redirect_url" fed back to me from the GC API had previously been fed directly into the browser url before, now, because it seems vue-router has control of the browser, I'm getting a cross origin error.

How can I configure the files to have the Nodejs back end acting as if it had control of the browser?

The end points are described here: https://developer.gocardless.com/api-reference/#core-endpoints-redirect-flows

My nginx default is:

server { charset UTF-8;

 listen 80;

 root /srv/www/sitename/;
 index index.html;
 server_name sitename.com;

  location /api/ {
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_http_version 1.1;
     proxy_set_header X-NginX-Proxy true;
     proxy_pass http://sitename.com:8081;
     proxy_ssl_session_reuse off;
     proxy_set_header Host $http_host;
     proxy_redirect off;
  }
  location / {
     try_files $uri.html $uri $uri/ /index.html;
    }

My button from Vuejs front end:

completeOrder()

..and uses axios this way:

import axios from 'axios'

export default() => {
  return axios.create({
    baseURL: 'http://sitename.com:8081/api'
  })
}

And set it up here:

import Api from '@/services/Api'

    export default {
      completeOrder () {
        return Api().post('order')
      }
    }

In the back end it sends:

      app.post('/api/order', function (req, res){
        rp({              
          //rp is npm request-promise
          uri: BASE_URL + "/redirect_flows",
          method: 'POST',
          body:JSON.stringify(input_json),
          headers: headers
        })  // this works and API sends me the response
        .then(function(response) {
          var str_response =JSON.parse(response);
          url = str_response['redirect_flows']['redirect_url']  
          // url works fine when I paste into a separate browser
          res.redirect(url)
    })
    .catch(function (err) {
        console.error(err);
    })
})

Everything works up until the point:

res.redirect(url)

..where the Gocardless API response supplies me with the URL which I need to load into a browser.

It looks something like this:

https://pay-sandbox.gocardless.com/flow/RE000156

I think I need to break out of Vuejs's control of the browser via vue-router just long enough to allow the user to call the form with the redirect_url, then come back to the home page of the app again.

Any ideas very welcome!

Upvotes: 1

Views: 1479

Answers (1)

ErvalhouS
ErvalhouS

Reputation: 4216

I think you actually have a JS error. In the then block you instantiate a response, but you use a res variable to redirect. Try chaging the variable

.then(function(response) {
      var str_response = JSON.parse(response);
      url = str_response['redirect_flows']['redirect_url']  
      // url works fine when I paste into a separate browser
      response.redirect(url)
})

I am not a Vue.JS expert, so I don't know if that works, try using a vanilla JS redirect to test this feature:

window.location.href = url;

This way, you will be sure that the url works. After that, try checking out a full Vue.JS option.

Upvotes: 1

Related Questions