如何使用 Nativescript (Vue) 在本地开发环境中进行 Axios 调用？答案

【问题标题】：How to make Axios calls in a local development environment with Nativescript (Vue)?如何使用 Nativescript (Vue) 在本地开发环境中进行 Axios 调用？
【发布时间】：2020-01-15 14:18:14
【问题描述】：

我正在开发一个使用后端 API（运行 Laravel）的 Nativescript 应用程序。为了开发，该应用程序在 jwt9.test 上使用 Laravel Valet 在本地提供服务。

我在 Axios 接受我的自签名证书时遇到问题。下面的代码在访问外部 API 时效果很好：

const axios = require('axios').default;
const instance = axios.create({
     baseURL: 'https://jsonplaceholder.typicode.com/posts/',
});

instance.get('/1',
   {
     'email': email,  // relic for local instance
     'password': password // relic for local instance
   }, {
   "headers": {
     'Content-Type': 'application/json',
   }
})
   .then(function (response) {
       console.log("Dilly Dilly: " + JSON.stringify(response));
   })
   .catch(function (error) {
       console.log("Zut: " + error)  
   });
}

当我将它翻转到本地服务器时（通过 Postman 更改为具有适当 URL 的帖子），我收到：

JS: 'Zut: Error: Request failed with status code null'

我的研究表明 Axios 不喜欢自签名证书。

我看到了一些解决方案，涉及将 LaravelValetCASelfSigned.pem 加载到模拟器和/或让 Axios 加载它，但细节很少且文档不完整（我对所有这些都比较陌生，所以如果你是一个头发花白的人审查并认为这很简单，请说明！）。

根据https://github.com/axios/axios/issues/535，如果我尝试建议的方法并安装节点“https”模块并加载：

var https = require('https');

同时也符合我的要求：

{
     "httpsAgent": new https.Agent({ rejectUnauthorized: false })
},

有人告诉我TypeError: https.Agent is not a constructor。在https.Agent is not a function 中删除“新”结果。

对于非开发人员来说，我觉得我已经取得了巨大的进步，但是如何使用 Nativescript、Laravel、Valet 和 Axios 等相对常见的工具创建功能性本地开发环境的简单问题却让我无法理解。

有什么建议吗？我并不热衷于拥有实时开发环境。

【问题讨论】：

您能否在不使用 SSL 的情况下访问您的本地 API？只是为了确保您的常规设置正常工作。
不，我无法以编程方式访问它，只能使用 Postman。这就是我使用外部 api 进行测试的原因，所以我可以切换 url 和请求类型。
如果你已经在电脑本地配置了域名，那就不行了。 POSTMAN 在您的计算机中运行，因此它可能能够访问服务器，但模拟器/移动设备作为一个单独的实体单独连接到网络，它不知道在给定域中查找的位置。这不是 {N} 的问题，而是您的网络，您必须在网络上设置 DNS 或某种代理。你也不能对 NodeJS 使用 https 模块，使用 nativescript-https 进行 SSL 握手。
好的。谢谢@Manoj。不过那真是太可惜了。我原以为为现代技术设置本地开发环境不会那么痛苦。
@scott_p 一个简单的解决方案是使用Ngrok

标签： laravel axios localhost nativescript laravel-valet

【解决方案1】：

@pz90 建议使用 Ngrok，这当然是答案。我脑子里的东西过于复杂，被 SSL 证书、Axios 要求、Postman 要求等纠缠不清……

简而言之，请确保您使用以下方法对您的代客泊车网站进行不安全（如果安全）： valet unsecure [sitename]

通过以下方式获得 [站点名称]： valet links

从那里你可以... valet share

...并使用 Axios github 上的代码变体访问您的本地站点（和 DB，假设您的钩子设置正确）。下面的作品，fwiw。

        const axios = require('axios').default;

        axios.defaults.baseURL = 'https://xxxx.ngrok.io';
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

        // Send a POST request
        axios({
            method: 'post',
            url: '/api/login',
            data: {
                email: email,
                password: password,
            }
        }).then(function (response) {
            console.log(response.data);  //Outputs API response in CL to verify functionality.
        });

我很感谢这个网站和它的参与者。谢谢。

【讨论】：