Доступ к XMLHttpRequest заблокирован политикой CORS в ReactJS с использованием Axios

Question

Я настраиваю кнопку подключения полосы в моем React Component, используя 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>
    );
  }
}

Answer 1

В вашем коде нет ничего плохого, но, скорее всего, конечная точка API, которую пытается достичь код, не настроена для веб-приложения JavaScript. Политика 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/;
    }
}

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

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

Answer 2

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

Answer 3

Узнайте о 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

Answer 4

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

Answer 5

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

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