I have this code in codepen and it works properly however if I installed this code on a wordpress site as a plugin, it says this error below.
Access to XMLHttpRequest at 'https://vative.us15.list-manage.com/subscribe/post' (redirected from 'http://vative.us15.list-manage.com/subscribe/post') from origin 'http://localhost:8888' 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.
My codepen is here.
https://codepen.io/gegejosper/pen/powzGQJ?editors=1011
$.ajax({
type: "post",
url: "https://vative.us15.list-manage.com/subscribe/post",
dataType: "json",
data: data_val,
success: function(data) {
$(".optin-form").hide();
$(".optin-success").show();
},
//expected to be error in result.
error: function(data){
$(".optin-form").hide();
$(".optin-success").show();
}
});
Is there a way to fix this issue? Please help.
Server (https://vative.us15.list-manage.com) has to allow the cross origin requests. As of now it's not allowing this. (Exact solution will depends on which language server is written)
I see the same issue in codeopen: index.html:1 Access to XMLHttpRequest at 'https://vative.us15.list-manage.com/subscribe/post' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
From the server-side (your VPS) add the following header:
Access-Control-Allow-Origin: *
Nodejs
res.writeHead(200, {'Access-Control-Allow-Origin': '*'});
PHP
header('Access-Control-Allow-Origin: *');
You can also white list certain domains as shown here :
Access-Control-Allow-Origin: https://codepen.io
For more info, check MDN