Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 如何在通过Vuejs调用时使Nodejs重定向工作_Node.js_Api_Nginx_Vue.js_Axios - Fatal编程技术网

Node.js 如何在通过Vuejs调用时使Nodejs重定向工作

Node.js 如何在通过Vuejs调用时使Nodejs重定向工作,node.js,api,nginx,vue.js,axios,Node.js,Api,Nginx,Vue.js,Axios,我已经在Nodejs中创建并测试了POST和GET请求方法,这样我就可以通过Gocardless注册API完美地向用户发送请求 这是他们的API提供的注册表单,允许他们输入详细信息,然后在用户填写后返回用户 但是,当我使用Vuejs设置前端并使用Axios进行以前从后端发出的相同调用时,似乎因为从GC API反馈给我的“redirect_url”以前直接反馈到浏览器url,现在,因为vue router似乎控制了浏览器,所以我得到了一个跨源错误 如何配置这些文件,使Nodejs后端能够像控制浏览

我已经在Nodejs中创建并测试了POST和GET请求方法,这样我就可以通过Gocardless注册API完美地向用户发送请求

这是他们的API提供的注册表单,允许他们输入详细信息,然后在用户填写后返回用户

但是,当我使用Vuejs设置前端并使用Axios进行以前从后端发出的相同调用时,似乎因为从GC API反馈给我的“redirect_url”以前直接反馈到浏览器url,现在,因为vue router似乎控制了浏览器,所以我得到了一个跨源错误

如何配置这些文件,使Nodejs后端能够像控制浏览器一样工作

此处描述了终点:

我的nginx默认值是:

服务器{ 字符集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;
    }
Vuejs前端的我的按钮:

completeOrder()
…并以这种方式使用axios:

import axios from 'axios'

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

import Api from '@/services/Api'

    export default {
      completeOrder () {
        return Api().post('order')
      }
    }
在后端,它发送:

      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);
    })
})
在这之前,一切都正常:

res.redirect(url)
…其中Gocardless API响应为我提供了需要加载到浏览器中的URL

它看起来像这样:

https://pay-sandbox.gocardless.com/flow/RE000156
我想我需要通过vue路由器打破Vuejs对浏览器的控制,只需要足够长的时间,允许用户使用重定向url调用表单,然后再次返回应用程序的主页


任何想法都非常受欢迎!

我认为您实际上有一个JS错误。在
then
块中,您实例化了
响应
,但您使用
res
变量重定向。 尝试更改变量

.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)
})
我不是Vue.JS专家,所以我不知道这是否有效,请尝试使用vanilla JS重定向来测试此功能:

window.location.href = url;

通过这种方式,您将确保url正常工作。之后,请重试。

谢谢,我会在再次访问代码后立即重试。