CODEWITHSUNDEEP
javascriptajaxxmlhttprequestsame-origin-policy
EasyWay
EasyWay

Reputation: 365

XMLHttpRequest Issue has been blocked by CORS policy:

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.

Upvotes: 1

Views: 11171

Answers (2)

ibrahim tanyalcin
ibrahim tanyalcin

Reputation: 6491

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

Upvotes: 2

ShevchenkoVV
ShevchenkoVV

Reputation: 131

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.

Upvotes: 2

Related Questions