由于访问控制检查，XMLHttpRequest 无法加载 https://localhost:8585/pay

Question

我将 nodeJS 和 expressJS 用于后端，将 ReactJS 用于我的应用程序的前端。在我的计算机上本地运行时一切正常。但是，我最近尝试使用 Firebase 部署该应用程序。该应用程序在 firebase 的给定链接上成功启动。 有线的事情发生了。

1. 它只适用于我的桌面浏览器。如果我尝试在其他设备上运行我的网站，它就不起作用。首先，在桌面上，在 Chrome 中它可以工作。在 Safari 中，无法正常工作。在控制台中，它显示“由于访问控制检查，XMLHttpRequest 无法加载 http://localhost:8585/pay。” 我搜索一下。我创建了一个 https localhost 来解决这个问题。现在在我的桌面上，chrome 和 safari 都可以工作！！！不幸的是，当我在其他设备上运行该网站时。它永远不会起作用！
2. 但是，当我在手机上查看我的网站时，chrome 和 safari 不适用于我的网站。我检查了它给我的控制台

XMLHttpRequest cannot load https://localhost:8585/pay due to access control checks.

我已经找了几天了。我不知道为什么它只适用于我的桌面而不适用于其他设备。 我有 app.use(cors()); 来解决 access-control-allow-origin 问题。我不知道发生了什么。

这是我的 index.js

const functions = require('firebase-functions');

const express = require('express')
const app = express()
const cors = require('cors')
const bodyParser = require('body-parser')
const stripe = require('stripe')('sk_test_51HJ0tkCo200wpjbfBGB');
var path = require('path')
var fs = require('fs')
var https = require('https')
var certOptions = {
  key: fs.readFileSync(path.resolve('./server.key')),
  cert: fs.readFileSync(path.resolve('./server.crt'))
}

const port = 8585
app.use(cors());
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))


// parse application/json
app.use(bodyParser.json())

app.get('*', (req, res) => {
  res.send("Hello from the API")
})

app.post('/pay', async (req, res) => {
    const {amount, billingDetails} = req.body;
    const customer = await stripe.customers.create({
      email: billingDetails.email,
      name: billingDetails.name,
      phone: 333333,
     
    });

    const paymentIntent = await stripe.paymentIntents.create({
        amount: amount,
        currency: 'usd',
        customer: customer.id,
        // Verify your integration in this guide by including this parameter
        metadata: {integration_check: 'accept_a_payment'},
        receipt_email: billingDetails.email,
        description: `Purchased the ${billingDetails.name}`,
        shipping: {
          name: billingDetails.name,
          address: {
            line1: billingDetails.address.line1,
            city: billingDetails.address.city,
            country: billingDetails.address.country,
            postal_code: billingDetails.address.postal_code
          }
        }
      });

      res.json({'client_secret': paymentIntent['client_secret']})
})


https.createServer(certOptions, app).listen(port, () => console.log(`Example app listening on port ${port}! https://localhost:${port}`))

//app.listen(port, () => console.log(`Example app listening on port ${port}! https://localhost:${port}`))
exports.api = functions.https.onRequest(app)

在我的反应中，我发了一个帖子。

const res = await axios.post('https://localhost:8585/pay', {
        amount: (props.totalPrice*100).toFixed(0), 
        billingDetails: billingDetails,
        });

在我的 firebase.json 中

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/",
        "destination": "/index.html"
      },
      {
        "source": "/api",
        "function": "api"
      }
    ]
  }
}

我已经尝试过这样的发帖请求

const res = await axios.post('/pay'

或

const res = await axios.post('/api/pay'

它给了我

the server responded with a status of 404 ()

因此，它不起作用。请帮帮我。

Answer 1

您必须将 localhost 更改为您的 firebase ip