woocommerce / woocommerce-rest-api-js-lib

New JavaScript library for WooCommerce REST API
https://www.npmjs.com/package/@woocommerce/woocommerce-rest-api
MIT License
282 stars 75 forks source link

Localhost Create Customer Account : blocked by CORS policy #113

Open differentMonster opened 2 years ago

differentMonster commented 2 years ago

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 commented 1 year ago

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

hofewo commented 12 months ago

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!