CORS errrors when calling API

[StarNeit]

Hello.
I am using this npm module in meteor project, and this is my code implementation.

// local variables
var wepay_settings = {
'client_id' : 'XXXXXXX',
'client_secret' : 'XXXXXXX',
'access_token' : 'XXXXXXXXX', // used for oAuth2
// 'api_version': 'API_VERSION'
}

    var wp = new wepay.WEPAY(wepay_settings);
    wp.use_staging(); // use staging environment (payments are not charged)
    wp.call('/checkout/create',
        {
            'account_id': XXXX,
            'amount': 5,
            'currency': 'USD',
            'short_description': 'Test: Selling 42 Pens',
            'type': 'goods'
        },
        function(response) {
            console.log('%s', response);
        }
    );

I have got below errors when calling this API

• OPTIONS https://stage.wepayapi.com/v2/checkout/create 405 ()
• Failed to load https://stage.wepayapi.com/v2/checkout/create: 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'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I am pulling my hairs for few days to solve this problem, but I couldn't find any solution yet.
Is there the problem of this package module.
Please help me with this issue. Thank you so mcuh.

[camerona93]

Hey there @StarNeit!

What you're running into is a browser-initiated "Cross Origin Request" issue - browsers are designed to prevent a website from making an HTTP call to a resource that is from a different origin (wepay.com) than the one it is originating from (localhost:3000) unless they pass a pre-flight check (more reading here).

Given that your WePay credentials should stay secret on the server-side of your application, and that the WePay API does not allow API calls originating from a browser (which is why you're encountering CORS errors), you should move your WePay logic to your application's server, rather than the webpage.

For example:

var app = require('express')(); // expressJS, allows you to easily set up a server
var wepay = require('wepay').WEPAY;

var wepay_settings = {
	'client_id'     : 'XXXXXXX',
	'client_secret' : 'XXXXXXXXXXXX',
	'access_token'  : 'XXXXXXXXXXXX'
};

var wp = new wepay(wepay_settings);
wp.use_staging();

app.get('/', function(req, res) {
	wp.call('/checkout/create',
		{
			"account_id": "XXXXX",
			"short_description": "short",
			"amount": 100,
			"currency": "USD",
			"type": "donation"
		},
		function (response) {
			console.log("WePay response:\n", response);
			res.send("Success!");
		});
});

app.listen(3000, function() {
	console.log("Listening on port 3000");
});

The above node application will spin up a server at port 3000, and on a GET request to / will call WePay's /checkout/create endpoint using the Node SDK, print the response to console, and send a "Success!" response string. You can observe this by visiting http://localhost:3000 in a browser - you should see "Success!" printed on the screen and you should see WePay's API response in your server logs.

Please let me know if I've incorrectly assessed your situation or if you're still having trouble. Thanks!

[StarNeit]

You're correct, and I should have implemented them in server codes.
I solved my situation by implementing those codes in server without any issues now.

Thank you so much. 👍 💯