ruby-on-rails React/Rails重定向错误:请求的资源上不存在“Access-Control-Allow-Origin”标头

dl5txlt9  于 2023-10-21  发布在  Ruby
关注(0)|答案(1)|浏览(112)

我正在构建一个带有React前端和Rails后端的应用程序。在账单页面上,用户将单击一个按钮将其重定向到Stripe的客户门户。为了创建客户门户会话,我需要在URL中传入一个customer_id值,它是用stripe gem方法生成的。
在我的React函数中,当单击按钮时,我运行一个axios调用,该调用命中一个rails控制器方法,该方法查找customer_id值,调用stripe并获取客户门户会话。然后控制器以重定向到这个新创建的url结束方法,我在控制台中得到以下错误:

  • CORS策略已阻止从源“http://localhost:3000”访问"https://billing.stripe.com/p/session/test_customer_portal_link“(从”http://localhost:3000/customer_portal“重定向)上的XMLHttpRequest:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“Node-Control-Allow-Origin”标头。*

如果我复制并粘贴到它自己的浏览器窗口中,生成的链接确实可以正常工作。
这是我尝试重定向的Rails控制器。

class CustomerPortalController < ApplicationController
  before_action :authenticate_user!

  
  def create
    @user = current_user
    @company_profile = @user.company_profile
    @customer_id = @company_profile.customer_id

    session = Stripe::BillingPortal::Session.create({
        customer: @customer_id
    })
    redirect_to session.url, allow_other_hosts: true, status: :see_other
    return
  end

end

这里是我调用axios的React函数:

import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import { authToken } from 'Helpers/authToken';

function ManageSubscription(){

  const url = '/customer_portal';

  const handlePortal = async (e) => {
    e.preventDefault()
    axios.post(url, {headers: { 'X-CSRF-Token': authToken, Accept: 'application/json' }})
  }

  return(
    <div className="subscription-top-wrapper">
      <div className="customer-portal-row">
        <button 
          onClick={handlePortal}
          className="button-33 w-button"
        >
          Manage Your Subscription
        </button>
      </div>
    </div>
  );
}

在rails堆栈跟踪中,它似乎工作正常:

↳ app/controllers/customer_portal_controller.rb:7
Redirected to https://billing.stripe.com/p/session/test_customer_specific_link
Completed 303 See Other in 786ms (ActiveRecord: 27.4ms)

添加rack-cors信息:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
             headers: :any,
             expose: ['access-token', 'expiry', 'token-type', 'uid', 'client'],
             methods: %i[get post options delete put]
  end
end
qcuzuvrc

qcuzuvrc1#

对于任何在这方面卡住的人,我尝试了一种不同的基于React的方法。在我的rails控制器中,我没有尝试重定向,而是使用控制器将url传递到前端:

render json: { customer_id: session.url }

然后在我的react函数中,我获取该url并将其设置为窗口位置:

const handlePortal = async (e) => {
    e.preventDefault();

    setDisableButton(true);
    
    axios.post(url, 
    {
      headers: { 
      'X-CSRF-Token': authToken(), 
      Accept: 'application/json'
      }
    }).then(({ data }) => {
      const redirectUrl = data.customer_id.toString();
      if (redirectUrl != null) {
        window.location.replace(redirectUrl);
      }
    }).catch(error => {
      if (typeof onError === 'function') {
        onError(error);
      }
    });
  }

这不是我喜欢的方法,但它仍然工作得很好。

相关问题