Question

我正在使用Meteor进行Web应用程序，我们的想法是我们在客户端拥有所有功能，客户端将对我们的REST API执行API调用。问题是我没有管理向我们的API服务器发送任何HTTPS POST请求。互联网上有很多帖子说问题在CORS标题中，但API服务器发送标题：access-control-allow-origin：*。所以这不应该成为问题。

我有简单的登录模板，对于该模板，我将使用以下方式捕获提交事件：

import {Template} from 'meteor/templating';
import { HTTP } from 'meteor/http';
import "./login.html";

Template.login.events({
   'submit .login_form'(event) {
       const target = event.target;
       let username = target.username.value;
       let password = target.password.value;

       // attempted HTTPS POST request
       // Meteor.http.post(my_api_url, { // no success with this either
       HTTP.call("POST", my_api_url, {
           data: {
               method: "login",
               params: {
                   username: username,
                   passwrd: password
               }
           }
       }, function (error, result) {
           // we will end up here just fine, but 'error' contains error
           // result is undefined 
           console.log(error);
       });
   // do stuff
   },
});

console.log（result）给了我这个错误：

Error: network
Stack trace:
httpcall_client.js/HTTP.call/xhr.onreadystatechange@http://localhost:3000/packages/http.js?hash=2a49...181ea:243:20

是的，我已经用postman测试了API，它应该返回上面显示的数据。我在localhost中运行Meteor应用程序。

编辑：我试图传递给API的Json是

{"method": "login", 
 "params": {"username": "username", 
 "passwrd": "password"}}

编辑2：查看浏览器网络标签时，我看不到任何外出请求。

我的Meteor模板如下所示：

<template name="login">
    <h1>Login</h1>
    <form class="login_form" method="POST">
        <input type="text" name="username" placeholder="Username"/>
        <input type="password" name="password" placeholder="Password"/>
        <input class="btn btn-success" type="submit" value="Log In"/>
    </form>
</template>

Answer 1

好像你的服务器端有错误。

根据http package source code，只有在请求已完成但没有http答案的情况下，network错误才会被抛出（传递给回调）。因此，这不是客户问题。

Answer 2

我错了，或者你的回调不应该是：

function (error, result) {
    //...
}

编辑：我没错：检查docs，示例中还使用了如上所示的样式的回调。

这至少可以解释，为什么结果是错误的。（它没有解释为什么你的http调用本身会返回错误。）

编辑2：我在这里看到更多陷阱。

查看options对象结构：

{
    method: "POST",
    params: {
        username: username,
        passwrd: password
    }
}

也可以是：

{
    method: "POST",
    data: {
        username: username,
        passwrd: password
    }
}

取决于您的Web服务要求。那么关于password有一点 - 这是打算还是打字错误？

那么使用auth

呢？

{
    method: "POST",
    params: { // or data...?
        username: username,
        passwrd: password
    },
    auth: username+":"+password
}

这似乎是一个配置问题，具体取决于您的Web服务的要求。尝试不同的选项配置。必须有一个解决方案。

您可以添加手动调用Web服务的方式吗？

Answer 3

我必须在函数开头添加event.preventDefault();行

Template.login.events({
   'submit .login_form'(event) {
       event.preventDefault();

在我阻止客户端对我的meteor应用程序执行POST请求后，浏览器开始向API服务器发送OPTIONS请求。但这并没有完全解决问题。

然后问题是Meteor在端口3000中运行，并且API服务器设置CORS头：access-control-allow-origin：http://localhost，留下端口号，这就是为什么所有客户端请求在localhost中运行Meteor应用程序时失败。使用postman / cURL测试请求时，access-control-allow-origin标头始终设置为*，这与发送请求的浏览器不同。

安装lighttpd并将其设置为反向代理以在端口80中运行meteor app，然后在etc / hosts -file中为ip 127.0.0.1添加新主机名，例如： “127.0.0.1 localhost mymeteor.app”解决了我的问题。现在我必须在url mymeteor.app中访问我的Meteor应用程序并且它可以工作。

指向将lighttpd配置为代理的链接：https://redmine.lighttpd.net/projects/1/wiki/Docs_ModProxy

使用Meteor使客户端仅向第三方API发出POST请求

3 个答案: