Localhost Create Customer Account : blocked by CORS policy

[differentMonster]

i wanted to create a customer account sending data from frontend to my wordpress woocommerce restful api and i have this error.

Access to XMLHttpRequest at '[http://localhost:3080/wp-json/wc/v3/customers?oauth_consumer_key=ck_xxx&oauth_nonce=WFJEpYVFEoL2tQjX10vfJWrjl3ksFav0&oauth_signature_method=HMAC-SHA256&oauth_timestamp=1641581338&oauth_version=1.0&oauth_signature=x6eRfi7mO1F%2FfJT34hamqd%2Bwux%2BMKFx8SVViayUDIgE%3D](http://localhost:3080/wp-json/wc/v3/customers?oauth_consumer_key=ck_ca8dc3da04a18c79601e7b49c6e8e216da06cf82&oauth_nonce=WFJEpYVFEoL2tQjX10vfJWrjl3ksFav0&oauth_signature_method=HMAC-SHA256&oauth_timestamp=1641581338&oauth_version=1.0&oauth_signature=x6eRfi7mO1F%2FfJT34hamqd%2Bwux%2BMKFx8SVViayUDIgE%3D)' from origin '[http://localhost:3000](http://localhost:3000/)' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

here is my post code

    import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api"

     // initialise the WooCommerceRestApi //
    const api = new WooCommerceRestApi({
        url: "http://localhost:3080",
        consumerKey: "ck_xxx",
        consumerSecret: "cs_xxx",
        version: "wc/v3"
    });
   
         async registerUsers() {
                await api.post('customers', {
                    data: {
                        email: this.email,
                        username: this.username,
                        password: this.password,
                    }
                }).then((response) => {
                    console.log('Response: ', response.data)
                    console.log("consumer create")
                }).catch((e) => {
                    throw new Error('Could not register users, please try again')
                    console.log("Response Status:", error.response.status);
                    console.log("Response Headers:", error.response.headers);
                    console.log("Response Data:", error.response.data);
                })
            },

anyone facing this problem, how do i bypass the CORS policy ? i am testing on localhost

[duszmox]

I have the same problem, did you figure out a solution?

[hofewo]

Strangely, when querying a specific few WP/WC rest endpoints the CORS issue seems to come up. I discovered that when NOT fetching these endpoints with basic auth (as is the default setting), but via the query string instead (which does mean exposing the consumer key and secrets via URL), the CORS issue does not seem to come up.

Using this library that would look like:
const api = new WooCommerceRestApi({
url: shopSettings?.url,
consumerKey: shopSettings?.consumer_key,
consumerSecret: shopSettings?.consumer_secret,
version: "wc/v3",
queryStringAuth: true,
});

Hope this helps!