使用 Axios 在 ReactJS 中访问被 CORS 策略阻止的 XMLHttpRequest

Question

我正在使用 Axios 在我的 React 组件中设置条带连接按钮。 重定向后我不断收到此错误

Access to XMLHttpRequest at 'https://connect.stripe.com/oauth/token' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
Thankyou.js:40 Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

我从 url 获取代码并使用axios.Post创建一个 curl 请求。 这是我的重定向 URL 中的代码

// Thankyou.js
export default class Thankyou extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const code = qs.parse(this.props.location.search, {
      ignoreQueryPrefix: true
    }).code;

    const params = {
      client_id: "*******************",
      client_secret: "**********************",
      grant_type: "authorization_code",
      code: code
    };

    axios
      .post(
        "https://connect.stripe.com/oauth/token",
        // apiBaseUrl,
        { params }
      )
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
    console.log(code);
  }

  render() {
    return (
      <div>
        <h2>Thank you for connecting with us!</h2>
      </div>
    );
  }
}

Answer 1

这可能是因为 Stripe 不提供 JavaScript 客户端，所以您要么必须使用自己的服务器代理，要么使用类似“ https://cors-anywhere.herokuapp.com/https://connect.stripe.com/oauth/token ”

Answer 2

您的代码没有任何问题，但很可能代码尝试访问的 API 端点不是为 JavaScript Web 应用程序设置的。 CORS 策略在服务器端设置，主要在浏览器端执行。

最好的解决方法是使用 Stripe 的 JavaScript 解决方案，例如Strip React Elements或Stripe.js 。

绕过 CORS 的一种黑客方法是使用NGINX等解决方案设置反向代理。 例如，您可以使用以下 nginx 配置：

server {
    listen 8080;
    server_name _;

    location / {
        proxy_pass http://your-web-app:2020/;
    }

    location /stripe/ {
        proxy_pass https://connect.stripe.com/;
    }
}

通过这样做，所有对 Stripe.com 的 API 调用都可以通过您的 Web 应用程序 URL 下的/stripe进行。 例如，调用http://yourapp/stripe/oauth/token与调用https://connect.stripe.com/oauth/token相同

话虽如此，第二个解决方案是hacky，Stripe 可能会决定阻止您的反向代理服务器。

Answer 3

基本上，您需要与托管此https://connect.stripe.com/oauth/token任何人交谈以启用 CORS（跨源资源共享）

这是大多数标准浏览器实施的一种安全措施，用于阻止对后端的不需要的请求

Answer 4

我建议通读这个网站： https : //stripe.com/docs/recipes/elements-react它直接从 stripe 中提供了关于使用他们的 API 和 react 的具体说明。 祝你好运！

Answer 5

了解 CORS

想想看，你的axios.post请求有什么问题，是成功联系到服务器了。 但是在服务器让您执行或操作它的文件之前还有一件事要做。

出于安全原因，浏览器会限制从脚本内发起的跨源 HTTP 请求。 例如，XMLHttpRequest 和 Fetch API 遵循同源策略。

因此，您的跨域请求和服务器跨域资源共享 (CORS) 必须匹配。

你怎么解决？

根据您的服务器和您正在实施的服务器端编程语言，您可以配置不同的参数来处理您的 CORS。

例如，您可以配置唯一允许的方法是：GET HEAD

因此，如果有人尝试使用不同的方法（如POST ）将axios.post发送到您的服务器，它将返回如下错误：

Access to XMLHttpRequest at 'https://connect.stripe.com/oauth/token' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
Thankyou.js:40 Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

资源：

https://www.w3.org/TR/cors/

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 6

我希望这个答案对新用户有用：这个问题可以通过在 Spring Boot Rest 控制器类中使用注释轻松解决。 类似于下面的内容（也是参考截图）：@CrossOrigin(origins = "http://localhost:4200")

明确提及导致此问题的 react JS 服务器 URL。 现在在添加上述注释（使用您的 React JS 服务器 URL）后，浏览器将允许流程。

祝一切顺利。