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

问题描述

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

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

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

我已经搜索了几天。我不知道为什么它只能在我的桌面而不是其他设备上运行。我有app.use（cors（））;来解决访问控制允许起源的问题。我不知道发生了什么。

这是我的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 ()

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

解决方法

您必须将 localhost 更改为您的Firebase IP

express javascript reactjs reactjs