我正在构建一个带有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
1条答案
按热度按时间qcuzuvrc1#
对于任何在这方面卡住的人,我尝试了一种不同的基于React的方法。在我的rails控制器中,我没有尝试重定向,而是使用控制器将url传递到前端:
然后在我的react函数中,我获取该url并将其设置为窗口位置:
这不是我喜欢的方法,但它仍然工作得很好。