执行条带签出时出现 CORS 错误

Question

我正在处理条带结帐项目，但由于 cors 错误而无法重定向到条带结帐页面时卡住了。我的反应前端在 localhost 3000 运行，并在 localhost 5000 表示后端。这是我在 server.js 中设置标头和使用 cors 的方式：

if (process.env.NODE_ENV === 'development') {
    app.use(cors({
        credentials: true,
        origin: process.env.CLIENT_URL
    }))
    app.use(morgan('dev'))
}

app.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Credentials", true);
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    res.setHeader('X-Frame-Options', 'sameorigin');
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, multipart/form-data");
    res.setHeader("Access-Control-Allow-Methods", "HEAD,GET,POST,DELETE,OPTIONS,PUT");
    next();
  });

这是我的 stripe.route.js ：

const express = require('express')
const router = express.Router()

const Stripe = require('./../controllers/stripe.controller');

router.post('/checkout' , async(req,res) => {
    const product = req.body.body;
    console.log(product);
    try
    {
    const session = Stripe.createCheckoutSession(product)

    return res.send(session)
    }
    catch(e)
    {
        console.log(e);
        res.status(400)
        return res.send({
            error: {
                message: e.message
            }
        })
    }
})


module.exports = router;

这是我的 stripe.controller.js：

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)

const createCheckoutSession = async(plan) => {
  const session = await stripe.checkout.sessions.create({
  success_url: `http://localhost:3000/success`,
  cancel_url: `http://localhost:3000/fail`,
  payment_method_types: ['card'],
  line_items: [
    {price: plan, quantity: 1},
  ],
  mode: 'subscription',
});
return session;
}

module.exports = {
  createCheckoutSession
}

这是我的反应前端页面：

import React, { useRef } from "react";
import { isAuth } from "../helpers/auth";
import { useNavigate } from "react-router-dom";
import axios from 'axios';
import styles from "./Pricing.module.scss";
export const Pricing = () => {
  const buttonValue = useRef();

  const navigate = useNavigate();

  const setBtnValue = (e) => {  
    buttonValue.current = e.target.value;
  };
  const checkoutHandler = async (e) => {
    const btnValue = buttonValue.current;
    console.log(btnValue);
      const res = await axios
     .post( 'http://localhost:5000/api/checkout' , {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      withCredentials: true,
      credentials: 'same-origin',
      body: 
        btnValue,
    })
    const url = res.url
    window.location.href = url
      
  };
  return (
    <div className={styles.container}>
      <h2 className={styles.heading}>Choose</h2>
      <div className={styles.priceRow}>
        <div className={styles.priceCol}>
          <p>Starter</p>
          <h3>
            50$ <span> / month</span>
          </h3>
          <ul>
            <li>1 Website</li>
            <li>10 GB Disk Space</li>
            <li>Free Email Address</li>
            <li>No SSL certificate</li>
            <li>Limited Support</li>
          </ul>
          <form onSubmit={checkoutHandler}>
            <button
              value="price_1"
              type="submit"
              className="btn"
              name="product"
              onClick={setBtnValue}
            >
              Upgrade Now
            </button>
          </form>
        </div>
        </div>
      </div>
  );
};

Answer 1

您可以从后端发回 session.url，然后从前端使用 window.location.replace 进行重定向，这样就可以了