Блог

Я настраиваю кнопку stripe connect в своем компоненте React с использованием Axios. Я продолжаю получать эту ошибку после перенаправления

 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 и создаю запрос curl с помощью axios.Post . Это код в моем 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, к которой пытается подключиться код, не настроена для веб-приложения JavaScript. Политика CORS устанавливается на стороне сервера и применяется в основном на стороне браузера.

Лучший способ обойти это — использовать решение Stripe на JavaScript, такое как Stripe 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/;
    }
}
  

При этом все вызовы API для Stripe.com может быть через /stripe по URL вашего веб-приложения. Например, вызов http://yourapp/stripe/oauth/token это то же самое, что и вызов https://connect.stripe.com/oauth/token

При этом второе решение является хакерским, и Stripe может решить заблокировать ваш обратный прокси-сервер.

в принципе, вам нужно поговорить с тем, кто размещает это https://connect.stripe.com/oauth/token , чтобы включить CORS (совместное использование ресурсов разных источников)

Это мера безопасности, реализованная большинством стандартных браузеров для предотвращения нежелательных запросов к вашему бэкэнду

Вероятно, это связано с тем, что Stripe не предоставляет клиент JavaScript, поэтому вам либо нужно использовать свой собственный прокси-сервер, либо использовать что-то вроде «https://cors-anywhere.herokuapp.com/https://connect.stripe.com/oauth/token«

Я надеюсь, что этот ответ будет полезен для новых пользователей: эта проблема может быть легко исправлена с помощью аннотации в вашем классе контроллера spring boot rest. Что-то вроде приведенного ниже (также скриншот ссылки): @CrossOrigin(origins = «http://localhost:4200 «)

Явно укажите URL-адрес сервера react JS, который вызывает эту проблему. Теперь после добавления вышеуказанной аннотации (с вашим URL-адресом сервера react JS) браузер разрешит поток.

Всего наилучшего.

Узнайте о CORS

Подумайте об этом, с вашим axios.post запросом что-то не так, он успешно связывается с сервером. Но есть еще одна вещь, которую нужно сделать, прежде чем сервер позволит вам выполнять или манипулировать его файлами.

По соображениям безопасности браузеры ограничивают HTTP-запросы из разных источников, инициируемые из скриптов. Например, XMLHttpRequest и Fetch API следуют политике того же источника.

Таким образом, ваш запрос из разных источников и совместное использование ресурсов сервера из разных источников (CORS) должны совпадать.

Как вы это решаете?

В зависимости от вашего сервера и языка программирования на стороне сервера, который вы реализуете, вы можете настроить различные параметры для обработки ваших CORS.

Например, вы можете настроить, что единственными разрешенными методами будут: GET HEAD

Поэтому, если кто-то попытается axios.post подключиться к вашему серверу с помощью другого метода, подобного 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

Я бы посоветовал прочитать этот сайт:https://stripe.com/docs/recipes/elements-react Он дает конкретные инструкции прямо из stripe по использованию их API с react. Удачи!

Чтобы исправить эту ошибку в вашем коде, вы можете сделать следующее:

Установите cors пакет на свой внутренний сервер / code. Этот пакет предоставляет промежуточное программное обеспечение, которое разрешает запросы из разных источников.

 npm i cors
  

Импортируйте пакет cors в код вашего внутреннего сервера.

 const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
  

Надеюсь, это решит вашу проблему 🙂