Facing CORS issue when trying to createWallet from React Application

[dmajumder4292]

I have looked at another issue which was related to CORS, but I did not get much help from it, which is why I am posting it again.

I have a react application, from which I am calling the createWallet function, I am taking the required data from the user such as AccountKey, WalletId, passphrase and passing them as per the example http://bcoin.io/api-docs/#create-a-wallet.

I also have an spvnode running in regtest mode, which I started by using the command node bin/spvnode --network=regtest.

When I click on the button to create the wallet, I am facing a CORS issue and the response in the chrome developer tools console looks like this:

Access to fetch at 'http://localhost:48334//wallet/test' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

And in the node log, it said:

[debug] (wallet-http) Request for method=OPTIONS path=/wallet/456 (127.0.0.1).

I know method is supposed to be PUT, but it is equal to OPTIONS and this probably because of CORS.

Then I tried re-starting the spvnode with some more flags, so the command looked like this:
node bin/spvnode --network=regtest --wallet-api-key=test --wallet-wallet-auth=true --wallet-cors=true

And then the error changed and looked like:

Access to fetch at 'http://localhost:48334//wallet/test' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

I have been suggested to look at bpanel before but I haven't been able to figure out how bpanel is overcoming CORS.

Please help me out in resolving this error.

[pinheadmz]

Does this branch in bweb solve your issue?

bcoin-org/bweb#7

I've been hearing about this issue from a few users all at once, related bug report: https://stackoverflow.com/questions/21783079/ajax-in-chrome-sending-options-instead-of-get-post-put-delete

And RE: bpanel. I mentioned it to you because it is based in react/redux, but I'm pretty sure it proxies everything through the bpanel server, so there wouldn't be CORS issues.

[dmajumder4292]

I resolved this issue, @mseshachalam helped me with it.

[pinheadmz]

Ok great! Was the fix in that bweb PR? I'd love to have an answer on this issue we can reference in the future.

[dmajumder4292]

Yes, I went inside the node_modules folder and then looked for bweb and in that I modified a file called cors.js.

In addition to that, you also need to start the node with the flag --wallet-cors=true, in case you have not modified the config file.