For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
On each checkout UI page load, Shopify Sends an OPTIONS Request to our server on the path /extensions
Hi Nico,
The OPTIONS request is a type of HTTP method that is used to describe the communication options for the target resource. It is part of the Cross-Origin Resource Sharing (CORS) mechanism, which allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.
In terms of your server, when it receives an OPTIONS request it should respond with methods that are supported by the server for the specified URL. This is specified in the Access-Control-Allow-Methods header. If the method indicated in the Access-Control-Request-Method header is not included in this list, then the client will know that its request will be denied, because the server does not support the method.
Here is an example of how you might handle an OPTIONS request in Node.js:
app.options('/extensions', function (req, res) {
res.header('Access-Control-Allow-Origin', 'https://your-shopify-app-origin.com');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.sendStatus(200);
});
In this case, the server is indicating that it allows GET
, PUT
, POST
, and DELETE
methods for the /extensions
path.
However, note that since your app has network_access = false
, it cannot make network calls to load data from your server during the checkout process. The OPTIONS request might not be necessary in this case, but it's generally a good idea to support it for the sake of completeness and to support future changes.
Hope this helps!
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog