無法通過Node.js將Heroku config var傳遞給Angular CLI應用程序

我正在開發一個項目，我需要在Angular中以JSON的形式傳遞一個條帶鍵。無法通過Node.js將Heroku config var傳遞給Angular CLI應用程序

我在Config vars中添加了Heroku的關鍵字，並試圖通過Node.js後端將該值傳遞給Angular，並使用Heroku教程中聲明的process.env.STRIPE_KEY方法。我完全失去了，我不確定我是否以正確的方式進行。

這是我的節點服務器文件。

//server.js 
const express = require('express'); 
const app = express(); 
const bodyParser = require("body-parser"); 
const router = express.Router(); 


app.use(express.static(__dirname + '/dist')); 
router.use(bodyParser.json()); 
router.use(bodyParser.urlencoded({extended: true})); 

app.listen(3000, function(){}); 

router.all('*',function(req,res,next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"); 
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, OPTIONS"); 
    next(); 

}); 



router.post('/stripetestkey', function(req, res) { 
    res.json({ 
    'STRIPE_TEST_API_KEY': process.env.STRIPE_KEY 
    }); 
}); 


module.exports = router;

這裏是服務提供商（以應用模塊和正確注入）從服務器

//service.ts 

import {Injectable} from "@angular/core"; 
import {Http, Headers} from "@angular/http"; 
import 'rxjs/add/operator/map'; 
import {Observable} from "rxjs"; 

@Injectable() 
export class KeyService { 
    constructor(private http: Http) {} 

    private getError(error: Response): Observable<any>{ 
    console.log(error); 
    return Observable.throw(error.json() || 'Server Issue'); 
    } 

    getKey(): Observable<any> { 
    let headers = new Headers(); 
    headers.append('Content-type', 'application/json'); 
    return this.http.get('http://localhost:3000/stripetestkey',{ headers: headers }) 
     .map(res => res.json()) 
     .catch(this.getError); 
    } 


}

這裏拿到鑰匙是代碼我有使用正確的密鑰

打開條紋結賬

openCheckout() { 
    this.keyService.getKey().subscribe(data => this.stripeTestKey = data.STRIPE_TEST_API_KEY); 
    let handler = (<any>window).StripeCheckout.configure({ 
     key: this.stripeTestKey, 
     locale: 'auto', 
     token: function (token: any) { 

     } 
    }); 
    handler.open({ 
     name: 'XXXXXX', 
     description: 'Donation', 
     amount: (this.donation * 100) 
    }); 
    }

我一直在取回HTML而不是JSON，我只是不確定我是否正確地去做這件事。我也試過傳遞JSON而不是process.env.STRIPE_KEY。任何人都可以讓我知道我需要做些什麼來通過node.js將heroku config var傳遞給我的角度應用程序？

謝謝！

P.S.這裏是我收到的錯誤..

Failed to load resource: the server responded with a status of 404 (Not Found) 
main.bundle.js:32 Response 
vendor.bundle.js:1443 ERROR SyntaxError: Unexpected token < in JSON at position 0 
    at JSON.parse (<anonymous>) 
    at Response.Body.json

更新** 我改變res.send在server.js到res.json，這裏是更新的錯誤我得到。

keys.service.ts:11 Response {_body: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta char…body>↵<pre>Cannot GET /stripetestkey</pre>↵</body>↵</html>↵", status: 404, ok: false, statusText: "Not Found", headers: Headers…} 


core.es5.js:1084 ERROR SyntaxError: Unexpected token < in JSON at position 0 
    at JSON.parse (<anonymous>) 
    at Response.Body.json (http.es5.js:796)

更新＃2 ******* 我router.post改變了server.js到router.get。我仍然得到上述相同的錯誤。我試圖直接將密鑰作爲對象傳遞

router.get('/stripetestkey', function(req, res) { 
    res.json({ 
    'STRIPE_TEST_API_KEY': 'pk_test_XXXXXXXXXXXXXXXXXX' 
    }); 
});

和Stripe爲我返回了這個錯誤。

StripeCheckout.configure: Type mismatch for option 'key': 
Looking for type 'string', but instead we found 'object'. 
You can learn about the available configuration options in the Checkout docs:

立即簽出文檔。

****仍在掙扎這裏

**** UPDATE（這麼多）改變http://localhost:3000/stripetestkey到https://localhost:3000/keys（也改變服務器端/正確的路由鍵（更容易執行）使用代替。

OPTIONS https://localhost:3000/keys net::ERR_CONNECTION_CLOSED 
scheduleTask @ zone.js:1990 
webpackJsonp.585.ZoneDelegate.scheduleTask @ zone.js:384 
onScheduleTask @ zone.js:274 
webpackJsonp.585.ZoneDelegate.scheduleTask @ zone.js:378 
webpackJsonp.585.Zone.scheduleTask @ zone.js:209 
webpackJsonp.585.Zone.scheduleMacroTask @ zone.js:232 
(anonymous) @ zone.js:2014 
send @ VM1198:3 
(anonymous) @ http.es5.js:1254 
Observable._trySubscribe @ Observable.js:57 
Observable.subscribe @ Observable.js:45 
MapOperator.call @ map.js:54 
Observable.subscribe @ Observable.js:42 
CatchOperator.call @ catch.js:79 
Observable.subscribe @ Observable.js:42 
webpackJsonp.237.NavbarComponent.openCheckout @ navbar.component.ts:74 
(anonymous) @ NavbarComponent.html:40 
handleEvent @ core.es5.js:11798 
callWithDebugContext @ core.es5.js:13006 
debugHandleEvent @ core.es5.js:12594 
dispatchEvent @ core.es5.js:8773 
(anonymous) @ core.es5.js:9363 
(anonymous) @ platform-browser.es5.js:2683 
webpackJsonp.585.ZoneDelegate.invokeTask @ zone.js:398 
onInvokeTask @ core.es5.js:4116 
webpackJsonp.585.ZoneDelegate.invokeTask @ zone.js:397 
webpackJsonp.585.Zone.runTask @ zone.js:165 
ZoneTask.invoke @ zone.js:460 
keys.service.ts:11

來源

2017-04-25 Jonathan Corrin

res.json()res.send()

router.post('/stripetestkey', function(req, res) { 
    res.json({ 
    'KeyCode': process.env.STRIPE_KEY 
    }); 
});

鏈接表達對res.json()機制的文檔：https://expressjs.com/en/api.html#res.json

每404錯誤您得到編輯：

確保您所請求的資源一樣使用相同的動詞（GET，POST等）你的路由器正在定義。在你的情況，你是決定性的ExpressJS POST請求，但您的客戶端試圖讓不按你的路由器（this.http.get()在你的.ts文件）存在請求

您的新路線將是：

router.get('/stripetestkey', function(req, res) { 
    res.json({ 
    'KeyCode': process.env.STRIPE_KEY 
    }); 
});

UPDATE，說明如何確保this.stripeTestKey設置之前handler.open()

因爲this.keyService.getKey().subscribe()是異步，handler.open（）您設置的this.stripTestKey之前獲取調用。你可以做類似於下面的事情來修復它在你的.subscribe（）回調中：

openCheckout() { 
    this.keyService.getKey().subscribe(data => { 
    this.stripeTestKey = data.STRIPE_TEST_API_KEY 

    let handler = (<any>window).StripeCheckout.configure({ 
     key: this.stripeTestKey, 
     locale: 'auto', 
     token: function (token: any) { 

     } 
    }); 
    handler.open({ 
     name: 'XXXXXX', 
     description: 'Donation', 
     amount: (this.donation * 100) 
    }); 
    }); 
}

來源

2017-04-25 18:43:17

我把res.send改成了res.json，但仍然出現錯誤。請參閱上面的錯誤編輯。 –

對不起沒有注意到你正在嘗試從客戶端獲取，但你是Express路由器正在定義一個POST請求。您可以使用router.get（）而不是router.post（） - router.get（'/ stripetestkey'，function（req，res）{0} {0} {0} {KeyCode'：process.env。 STRIPE_KEY }）; }）; –

我改變了你說的。我仍然遇到同樣的錯誤。我試圖直接在開發環境中將對象傳遞給對象，並得到了上面的Stripe給出的錯誤。我可能會錯過別的東西，我只是不確定這是什麼。 –

無法通過Node.js將Heroku config var傳遞給Angular CLI應用程序

回答

相關問題