Drop in Components Cors policy in development mode

API Support
1

Im building an app with Dwolla that has a backend server written in NodeJS and a frontend client written in ReactJS. I’ve been trying to work with the Drop in components but I have a problem with the component not managing to go past the server side CORS policy.

this is my frontend set up:

dwolla.configure({
  environment: "sandbox",
  styles: "/styles/update-custom.css",
  // tokenUrl: () => Promise.resolve("/token-endpoint"),
  tokenUrl: "http://localhost:5000/dwolla/token-url",
  success: (res) => console.log(res),
  error: (err) => console.log(err),
  });

and this is my cors set up on nodejs/express side:

const app = express()
const port = process.env.PORT || 5000
app.use(cors())
app.use([limiter, morgan('common'), helmet()])

I’ve also tried multiple setups to cors like:

app.options('*', cors())
app.use(cors({ origin: '*' })
app.use(cors({ origin: '' })
app.use(cors({ origin: 'http://locahost:3000' })

nothing works, it keep getting blocked with different messages. For the setup I have above in the express script the error Im getting is: Access to fetch at ‘http://localhost:5000/dwolla/token-url’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.

Would really appreciate the help - I should not this is not happening with any other calls, from postman, client, curl etc.

Thank you!

1 Like
2

@Eran_Artzi Same issue here. Did you find a solution?

3

Dwolla,

Same problem here. We have set our “Access-Control-Allow-Origin” to our localhost for our frontend correctly and are seeing the CORS issue complaining about this as above.

Could you help? We would like to use the tokenUrl instead of the token parameter on our front end components.

Thanks.

4

Hi @Saveraa_LLC

I think it may be related to this issue:

5

Kelly, thanks. We do see the access control error when we tried using tokenUrl which is why we were attempting to use the token paramter.

Besides setting the “Access-Control-Allow-Origin” correctly on our response to not be *, what else do we need to do? It seems setting it to our front end url (which is localhost:3000) still doesn’t work.

Just to be clear we get "Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’.*

6

Kelly, let us know if you can point to a solution for this CORS issue above, or what you think we maybe doing wrong.

We have our endpoint that is doing this:


    var requestBody = {
      _links: {
        customer: {
          href: `${customer.dwollaLocation}`
        }
      },
      action: 'customer.documents.create'
    };

    const res = await dwolla.post(`/client-tokens`, requestBody);
    return {token: res.body.token};
7

Hi @Saveraa_LLC – Your Client token token call looks alright! It does look like the issue is with the frontend not being able to create calls to your backend code.

I wonder if you’re still receiving the CORS error even when using your frontend url because your domain and port doesn’t match exactly in the Access-Control-Allow-Origin header? I found the following resources online which might be helpful to reference

Hope that helps! Let us know if you come across any questions!