Blocked by CORS Policy on Local Machine, but not on remote test server

Viewed 55
  mounted() {
    const headers = {
        method: "POST",
        headers: { 
            "Authorization":"whm test:code",
            'Content-Type':'application/x-www-form-urlencoded',        
            'Content-Length':'0',        
        },
    };
    fetch("https://example.com/json-api/uapi_cpanel?api.version=1&cpanel.function=add_pop&cpanel.module=Email", headers)
        .then(response => response.json())
        .then(data => (this.postId = data.id));
    }
}

I am using the above code with my domain instead of example.com.

I do not have access to the origin API, I just have access via token.

Weirdly, this won't work, but will work fine on https://reqbin.com/.

To add to the weird-ness, if I use the same, but use cURL and PHP, works.

The PHP/ cURL version works completely fine, no issue exactly the same headers, body..

To add to the confusion, both PHP and this VueJS is running on localmachine.

Access to fetch 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.

I don't understand why it will work on Regbin and if I code the same request in PHP cURL it will work, but not via fetch in VueJS..

0 Answers
Related