首页 > 解决方案 > Firebase 功能使用“Firebase Serve”按预期工作,但在部署时抛出 ERROR 400

问题描述

我正在尝试使用 firebase 作为代理将数据从 API 提取到反应应用程序,以避免 CORS 限制。我可以在使用 Firebase Serve 时使用以下代码访问数据,但在部署时会抛出 400?感谢任何指导。

const functions = require('firebase-functions');
const axios = require('axios');
const admin = require('firebase-admin');
const cors = require('cors')({ origin: true });
const express = require('express');

const app = express();
admin.initializeApp();


// @Route: /orders
// @Desc: Get Orders from cartrover API using Firebase as a proxy to enable CORS

app.get('/orders', (req, res) => {
    const user = req.body.username;
    const pass = req.body.password;
    
    cors(req, res, () => {
        axios
            .get('https://api.cartrover.com/v1/merchant/orders/list/shipped', {
                auth: {
                    username: user,
                    password: pass,
                },
            })

            .then((resp) => {
                res.send(resp.data);
            });
    });
});

exports.api = functions.https.onRequest(app);

当使用“Firebase Serve”在 localhost 上进行测试时,我得到一个 JSON 对象作为 API 的响应,正如预期的那样。当我部署 firebase 功能并发出相同的请求时,我收到以下错误:

<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>Error 400 (Bad Request)!!1</title>
<style>
    * {
        margin: 0;
        padding: 0
    }

    html,
    code {
        font: 15px/22px arial, sans-serif
    }

    html {
        background: #fff;
        color: #222;
        padding: 15px
    }

    body {
        margin: 7% auto 0;
        max-width: 390px;
        min-height: 180px;
        padding: 30px 0 15px
    }

    *>body {
        background: url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;
        padding-right: 205px
    }

    p {
        margin: 11px 0 22px;
        overflow: hidden
    }

    ins {
        color: #777;
        text-decoration: none
    }

    a img {
        border: 0
    }

    @media screen and (max-width:772px) {
        body {
            background: none;
            margin-top: 0;
            max-width: none;
            padding-right: 0
        }
    }

    #logo {
        background: url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;
        margin-left: -5px
    }

    @media only screen and (min-resolution:192dpi) {
        #logo {
            background: url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;
            -moz-border-image: url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio:2) {
        #logo {
            background: url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;
            -webkit-background-size: 100% 100%
        }
    }

    #logo {
        display: inline-block;
        height: 54px;
        width: 150px
    }
</style>
<a href=//www.google.com/> <span id=logo aria-label=Google></span></a>
<p><b>400.</b> <ins>That’s an error.</ins>
    <p>Your client has issued a malformed or illegal request. <ins>That’s all we know.</ins>

标签: javascriptreactjsfirebasegoogle-cloud-functions

解决方案


推荐阅读