I have been trying to send data over to an external site and I get the error that the fetch has been disabled by a CORS policy. I have also tried disabling CORS from the backend but it does not redirect.
Backend code;
import { fetch } from 'wix-fetch'; let consumer_Key = '90VSVsqB7ktbhAxsHVMlDZuFKvD/xx'; let consumer_Secret = 'F54jvgwWen57xAb3aMaBQIaLe4w=xx'; const url = 'https://pay.pesapal.com/v3/api/Auth/RequestToken'; export function myBackendFunction() { const method = 'POST' const body = JSON.stringify({ ConsumerKey: '90VSVsqB7ktbhAmsHVMlDZuFKvD/UGbI', ConsumerSecret: 'F54jvgwWen57aAb3aMaBQIaLe4w=', Amount: '100.00', Description: 'Payment for order 123', Type: 'MERCHANT', Reference: '123', Email: 'john@example.com', PhoneNumber: '0712345678', Currency: 'KES', RedirectURL: 'https://www.dekarifx.app/upgrade', CallbackURL: 'https://www.dekarifx.app/upgrade' }) const headers = { // which origins are allowed "Access-Control-Allow-Origin": "https://www.pesapal.com/API/PostPesapalDirectOrderV4", // which methods are supported - you need to implement // functions for all methods listed here "Access-Control-Allow-Methods": "POST, GET, OPTIONS", // add additional headers as required "Access-Control-Max-Age": "86400" } fetch(url, { method, headers, body: body }) .then(response => response.json()) .then(data => console.log(data.access_token)) .catch(error => console.error(error)) }
Frontend code;
import {fetch} from 'wix-fetch'; import {myBackendFunction} from 'backend/my-backend-file'; $w.onReady(function () { }); export function button3_click(event) { myBackendFunction() .then(data => { console.log(data); // handle the payment response }) .catch(error => { console.error(error); // handle the payment error }) }
Any help will be appreciated!
The error you are receiving indicates that the external site you are trying to send data to has a CORS (Cross-Origin Resource Sharing) policy in place that is blocking your request from being executed. CORS is a security feature implemented by web browsers to restrict requests made from one origin to another.
Wellcare Medicare Part D In your case, the external site seems to be https://pay.pesapal.com. To fix this issue, you will need to allow the origins from where requests are coming from, by adding the appropriate response headers to the server's response. In this case, since you are using Wix as your backend, you can do this by adding the following code to your backend file:
import {ok, header} from 'wix-http-functions';
// This function is triggered when your backend receives a request
export function myBackendFunction(request) {
const body = JSON.stringify({
ConsumerKey: '90VSVsqB7ktbhAmsHVMlDZuFKvD/UGbI',
ConsumerSecret: 'F54jvgwWen57aAb3aMaBQIaLe4w=',
Amount: '100.00',
Description: 'Payment for order 123',
Type: 'MERCHANT',
Reference: '123',
Email: 'john@example.com',
PhoneNumber: '0712345678',
Currency: 'KES',
RedirectURL: 'https://www.dekarifx.app/upgrade',
CallbackURL: 'https://www.dekarifx.app/upgrade'
});
const headers = {
"Access-Control-Allow-Origin": "https://www.pesapal.com",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Accept"
};
return ok({
headers: headers,
body: body
});
}
You will also need to update the "Access-Control-Allow-Origin" header value to the domain of the external site that you are trying to send data to.
Additionally, you should make sure that you are calling the backend function correctly in your frontend code. You should modify your frontend code to call the backend function like this:
import {myBackendFunction} from 'backend/my-backend-file';
export function button3_click(event) {
myBackendFunction()
.then(data => {
console.log(data);
// handle the payment response
})
.catch(error => {
console.error(error);
// handle the payment error
})
}
I hope this helps you resolve the issue you're experiencing.