Spring安全防止请求到Stripe, CORS阻塞问题

Question

我有一个Spring -boot应用程序(实现Spring安全)在前端与react应用程序相关。当我做休息调用(GET, POST，…)时，它工作得很好，没有任何问题。然而，当我尝试从我的react应用程序调用Stripe checkout时，我得到这个错误:

跨域请求阻塞:同源策略不允许读取远程资源https://r.stripe.com/0。(原因:CORS请求未成功)。状态码:(null)

这是我的代码

SecurityConfig.java

protected void configure(HttpSecurity http) throws Exception {
String[] staticResources  =  {
"/api/clients/authentication/**",
"/api/repas/**"
};
http = http.cors().and().csrf().disable();
http = http
.exceptionHandling()
.and()
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and();
http
.authorizeRequests()
.antMatchers(staticResources).permitAll()
.anyRequest().authenticated();
http.addFilterAfter(jwtFilter, ExceptionTranslationFilter.class);
}

CorsConfiguration.java

Configuration
public class CorsConfiguration
{
@Bean
public WebMvcConfigurer corsConfigurer()
{
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods("HEAD", "GET", "PUT", "POST", "DELETE", "PATCH","OPTIONS")
.allowedOrigins("https://m.stripe.com/6","https://r.stripe.com/0","http://localhost:3000")
.exposedHeaders("*")
.allowedHeaders("*");
}
};
}

我试着把"*"在允许的起源，但它也没有工作。我尝试在安全配置文件中创建一个bean以启用cors并删除cors配置文件(如下所示)但是所有的调用，甚至那些对我的rest api的调用都失败了。

@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source =
new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}

更新:前面的代码是导致问题的原因ProfilPayment.java

export default function ProfilPayment() {
const [clientSecret, setClientSecret] = useState("");
const headers = {
'Content-Type': 'application/json',
"Access-Control-Allow-Origin": "*",
'Access-Control-Allow-Methods': "*",
'Authorization': `Bearer ${localStorage.getItem("token")}`
}
const URL_API_HTTP = "http://localhost:8080/api/clients/authentication/create-payment-intent";
async function handlePayment() {
console.log("if it works, this line should be shown");
try {
const response = await axios.post("http://localhost:8080/api/clients/authentication/create-payment-intent",{headers});
const data = response.data;
console.log(data);
console.log(typeof data);
setClientSecret(data);
}catch(error) {
alert(error.message);}
}
return (
<Card sx={{width: 250 ,height: 670, display: "inline" ,float: "left"}} style={{ border: "none", boxShadow: "none" }}>
<CardContent>
<Typography sx={{fontSize: 20, color: "#ef6800"}} color="text.secondary" gutterBottom >
Mode de paiement
</Typography>
<br/>
<Typography sx={{ fontSize: 12}} variant="body2" >
<br />
<br />
<ProfilButton value="Ajouter une carte" onClick={handlePayment}/>
</Typography>
<Typography>
{clientSecret && (
<Elements options={clientSecret} stripe={stripePromise}>
{ <CheckoutForm /> }
</Elements>
)}
</Typography>
</CardContent>
</Card>
);

}

Answer 1

r.stripe.com域仅用于跟踪指标，它不应该对支付能力产生任何影响。因此，您可以忽略这些类型的错误。

Answer 2

由于您可以直接进行get和post调用而不会出错，因此问题可能在前端级别。

我在使用http-server运行angularjs前端时遇到了同样的问题。我不得不使用命令"http-server -p 3000——cors"使cors在启动前端时工作

也许你可以参考这篇文章的解决方案。如何在react.js中允许CORS ?

Answer 3

我发现了问题所在:CORS的错误并不是主要问题。

这是在前端工作的更新代码(使用React和Stripe)。

ProfilPayment.java:

const appearance = {
theme: 'stripe',
};
const options = {
clientSecret,
appearance,
};
{ clientSecret && (
<Elements options={options} stripe={stripePromise}>
{ <CheckoutForm /> }
</Elements>
)
}