使用Meteor向第三方API發出僅客戶端POST請求

Question

我正在使用Meteor制作Web應用程序，想法是我們在客戶端具有所有功能，並且客戶端將執行對REST API的API調用。 問題是我無法管理將任何HTTPS POST請求發送到我們的API服務器。 Internet上滿是說問題出在CORS標頭中的帖子，但API服務器發送了標頭：access-control-allow-origin：*。 因此，這不應該是問題。

我有簡單的登錄模板，對於該模板，我將使用以下方法來捕獲Submit事件：

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

是的，我已經用郵遞員測試了API，它應該返回上面顯示的數據。 我在本地主機上運行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包源代碼 ，僅當請求已完成但沒有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();

在阻止客戶端對流星應用程序執行POST請求之后，瀏覽器開始向OPTIONS服務器發送OPTIONS請求。 但這並不能完全解決問題。

然后的問題是，Meteor在端口3000中運行，並且API服務器設置了CORS標頭：access-control-allow-origin： http：// localhost ，省略了端口號，這就是為什么所有客戶端請求都在以下情況下失敗的原因在本地主機上運行Meteor應用程序。 當使用postman / cURL測試請求時，access-control-allow-origin標頭始終設置為*，而瀏覽器發送請求時並非如此。

安裝lighttpd並將其設置為反向代理以在端口80中運行流星應用程序，然后在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