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

【问题标题】：Access to XMLHttpRequest blocked by CORS Policy in ReactJS using Axios使用 Axios 在 ReactJS 中访问被 CORS 策略阻止的 XMLHttpRequest
【发布时间】：2019-08-23 03:52:54
【问题描述】：

我正在使用 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>
    );
  }
}

【问题讨论】：

API 未启用 CORS，因此您不会在浏览器中公开凭据以供所有人查看。使用代理和条带化服务器端 sdk

标签： reactjs axios stripe-payments

【解决方案1】：

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

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

一切顺利。

【讨论】：

【解决方案2】：

了解 CORS

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

出于安全原因，浏览器会限制从脚本中发起的跨域 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循same-origin policy。

所以你的跨域请求和服务器跨域资源共享 (CORS) 必须匹配。

你是怎么解决的？

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

例如，您可以将唯一允许的方法配置为：抢头

因此，如果有人尝试使用 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

【讨论】：

【解决方案3】：

您的代码没有任何问题，但代码尝试访问的 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 调用都可以通过您的网络应用 URL 下的/stripe。例如，调用http://yourapp/stripe/oauth/token 与调用https://connect.stripe.com/oauth/token 相同

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：