Request to /wc/store/cart blocked by CORS due to "Request header field x-wc-store-api-nonce is not allowed by Access-Control-Allow-Headers in preflight response."

[joaojuicee]

I'm building a vue app that will connect to the woocommerce API which is hosted in a different domain than the WP application.
The wordpress application is using https with a valid certificate and ist running under the lemon-wp.test domain while the vue app is running on localhost.

I'm making a request to /wp-json/wc/store/cart/add-item with the requested X-WC-Store-API-Nonce header which has a valid token that I have generated via a custom endpoint using wp_create_nonce('wc_store_api'), however I keep getting blocked by CORS, here's the network error:

Access to XMLHttpRequest at 'https://lemon-wp.test/wp-json/wc/store/cart/add-item' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-wc-store-api-nonce is not allowed by Access-Control-Allow-Headers in preflight response.

The preflight request goes through but seems to be coming back with some errors from woocommerce, here's a dump of the response headers to the request sent by woocommerce:

access-control-allow-credentials: true
access-control-allow-headers: Authorization, X-WP-Nonce, Content-Disposition, Content-MD5, Content-Type
access-control-allow-methods: OPTIONS, GET, POST, PUT, PATCH, DELETE
access-control-allow-origin: http://localhost:3000
access-control-expose-headers: X-WP-Total, X-WP-TotalPages, Link
allow: POST
content-encoding: gzip
content-type: application/json; charset=UTF-8
date: Tue, 09 Feb 2021 00:23:52 GMT
link: <https://lemon-wp.test/wp-json/>; rel="https://api.w.org/"
server: nginx/1.19.6
vary: Accept-Encoding
vary: Origin
x-content-type-options: nosniff
x-powered-by: PHP/7.3.27
x-robots-tag: noindex
x-wp-doingitwrong: register_rest_route (since 5.5.0; The REST API route definition for <code>api/wc-nonce</code> is missing the required <code>permission_callback</code> argument. For REST API routes that are intended to be public, use <code>__return_true</code> as the permission callback.)

To reproduce

Steps to reproduce the behavior:

1. Install latest WP and Woocommerce
2. on your theme's functions.php file add the following code:

add_action('rest_api_init', function () {
	register_rest_route('api/', 'wc-nonce', array(
		'methods'  => 'GET',
		'callback' => 'generate_wc_nonce'
	));
});

function generate_wc_nonce($request)
{

	$response = new WP_REST_Response(wp_create_nonce('wc_store_api'));
	$response->set_status(200);

	return $response;
}

3. On any application make an axios request to: https://<your_wp_domain>/api/wc-nonce
4. Save the response somewhere in your code
5. Make a post request to woocommerce and make sure you include the X-WC-Store-API-Nonce header

Expected behavior

I should be able to make the request being that I'm providing the required header, it doesn't make sense that the API doesn't accept the header if you're able to hit the endpoint.

Screenshots

Request headers and data
CORS error
Woocommerce reponse to preflight

Environment

WordPress (please complete the following information):

• Core version: 5.7-beta1-50232
• WooCommerce version: Version 4.9.2
• Any other plugins installed:

• Jetpack by WordPress.com (Ver. 9.4)
• Hello Dolly (Ver. 1.7.2)
• WooCommerce Shipping & Tax (1.25.6)

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version 88.0.4324.146 (Official Build) (x86_64)

Additional context

Was able to make the same request via Postman

[mikejolley]

I don't know if we need to do this yet, but for now you should be able to add that header to the allowlist via this filter in the REST API:

https://github.com/WordPress/WordPress/blob/8a51ab57e0411acf1fac7d9bd0ed357d17c080cf/wp-includes/rest-api/class-wp-rest-server.php#L315

[senadir]

If you're using cart, you're going to run into samesite cookies not being passed and so you won't get the cart session attached to the browser session, you might want to fill an issue in WooCommerce repository to allow filtering wc_setcookie function, alternatively, you can hook into the action woocommerce_set_cart_cookies and set your own cookie with your own custom domain.

[joaojuicee]

I don't know if we need to do this yet, but for now you should be able to add that header to the allowlist via this filter in the REST API:

https://github.com/WordPress/WordPress/blob/8a51ab57e0411acf1fac7d9bd0ed357d17c080cf/wp-includes/rest-api/class-wp-rest-server.php#L315

@mikejolley I'm new to WP, I reckon I should add that to the functions.php file for an instance?
Would you be able to provide a simple example on how to include the header I mentioned?

Thanks in advance

[joaojuicee]

If you're using cart, you're going to run into samesite cookies not being passed and so you won't get the cart session attached to the browser session, you might want to fill an issue in WooCommerce repository to allow filtering wc_setcookie function, alternatively, you can hook into the action woocommerce_set_cart_cookies and set your own cookie with your own custom domain.

@senadir would be able to provide an example on how to include that function and said custom cookie?

[nerrad]

Hi there @joaojuicee 👋 offering support for custom development is outside the scope of what we are able to do here. You could try joining the WooCommerce Community Slack and see if anyone there is able to help you accomplish your goals.

[anthonymf]

Another way around this problem would be to send the cart key in the API response header, see #5683 and the PR #5953

[Amir-moradnejad]

I hope this link helps you.
https://stackoverflow.com/questions/53258297/access-to-xmlhttprequest-has-been-blocked-by-cors-policy
@joaojuicee

[allankwok]

add following code to your functions.php to enable cors headers

add_filter( 'rest_allowed_cors_headers', 'app_rest_headers_allowed_cors_headers' );
function app_rest_headers_allowed_cors_headers( $allow_headers ) {
//add headers which u like to get
    return array(
        'X-WP-Nonce', 
        'X-WC-Store-API-Nonce',
        'Nonce'
    );
}

[Govindnewtech]

// Disable nonce checks for WooCommerce Store API
function disable_woocommerce_store_api_nonce_check() {
return true;
}

add_filter('woocommerce_store_api_disable_nonce_check', 'disable_woocommerce_store_api_nonce_check');

Solution Code:

To disable nonce checks in the WooCommerce Store API, you can use the add_filter function. Keep in mind that disabling nonce checks should be done carefully and with an understanding of its security implications.