CODEWITHSUNDEEP
http-redirectcorswebpack-dev-serverstripe-connect
mibbit
mibbit

Reputation: 5365

Stripe authorization redirect response for preflight is invalid or requires "Access-Control-Allow-Origin" Header(redirect)

Trying to follow the Stripe Connect Rocket Rides Github Repo I am unable to do a redirect from my https webpack-dev-server using fetch. As you can see I am making a get request.

    return fetch(`https://localhost:3443/stripeAuthorize`, {
      method: 'GET',
      headers: {
        "Access-Control-Allow-Origin": "https://localhost:3443",
        'Accept': '*/*',
      }
    })
    .then((data) => {
      return data.json()
    })
    .then((json) => {
      console.log('redirectjson', json)
    })
    .catch((err) => {
      console.log('stripe redirect err caught: ', err)
    })

Looking inside the network tab of chrome I see status code '303 See Other' on both OPTIONS and GET

Request Headers:

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,es;q=0.6,th;q=0.4,zh-TW;q=0.2,zh;q=0.2,la;q=0.2,ja;q=0.2
Access-Control-Request-Headers:access-control-allow-origin
Access-Control-Request-Method:GET
Cache-Control:no-cache

I do notice that the GET network call is above the OPTIONS which is passed in by the browser, it seems odd the GET call would precede OPTIONS. I can't seem to get any other information from stripe or the http protocol. No error calling on the server

How can I debug this issue and why is the stripe redirect not working?

EDIT: I thought I made it clear that if I remove "Access-Control-Allow-Origin" I get the err:

Failed to load https://connect.stripe.com/express/oauth/authorize?client_id=ca_BR4uV37xvFoKjLE5g9g2wzcmYNT0jnXZ&state=xy5z4k7lpe7rkwyerlxv9rudi&stripe_user%5Bbusiness_type%5D=company: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:3443' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Upvotes: 0

Views: 2494

Answers (1)

mattbasta
mattbasta

Reputation: 13709

You've got some things a bit mixed up.

The /authorize endpoint in Rocket Rides is not meant to be requested with fetch() or AJAX, you're meant to navigate the browser to it.

What you're seeing is this: your server--the /stripeAuthorize endpoint--is redirecting to the Express onboarding flow (a HTML page that your user will onboard with). That's not configured with CORS, but you're downloading it with fetch(), so it fails.

Instead of fetch('/stripeAuthorize').then(/*...*/), simply write this:

window.location.href = '/stripeAuthorize';

Your browser should be redirected and you'll find yourself (assuming everything is configured correctly) in the onboarding flow.

Upvotes: 2

Related Questions