Getting CORS error when I call a external API from a UI Checkout extension

[codingmonkey]

Hi there

I am currently building a UI checkout extension and have to call a external API with “fetch” but it gives me a CORS error when I call it:

The owner of the API have told me that everything is sat up correctly and I can also call it from a custom Shopify App and that works.
I have also tried to call another API to call another API from the UI checkout extension to make sure it was not the API fault and it gives me the same error:

I have also put the necessary properties within the .toml file as shown below:

# Learn more about configuring your checkout UI extension:
# https://shopify.dev/api/checkout-extensions/checkout/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2023-10"

[[extensions]]
type = "ui_extension"
name = "checkout-ui-2"
handle = "checkout-ui-2"

# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets-overview
[[extensions.targeting]]
target = "purchase.checkout.contact.render-after"
module = "./src/Checkout.jsx"
[extensions.capabilities]
block_progress = true
api_access = true

# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
network_access = true

# Loads metafields on checkout resources, including the cart,
# products, customers, and more. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields

# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_key"
# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_other_key"

# Defines settings that will be collected from merchants installing
# your extension. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition

# [extensions.settings]
# [[extensions.settings.fields]]
# key = "banner_title"
# type = "single_line_text_field"
# name = "Banner title"
# description = "Enter a title for the banner"

Can somebody explain me why I am getting CORS error calling an external API within a UI Checkout extension and know maybe how to solve it?

Thank you.

[sebasvivas]

I’m having the exact same issue. I’m trying to create a order-status checkout extension to fetch data from a third party to get customer’s order tracking information. I’m adding the cors headers on my fetch request and still get cors failed error. But if I copy the curl request and paste it on postman it works without issues.

However, when I try to access a public API, for example the pokeapi, I do get the correct response.

[codingmonkey]

That sounds weird, I can’t seem to get access to any APIs within a Checkout UI extension.

Hopefully somebody can help us, the Shopify support team did not know what the problem was.

[mrudul]

You need to add network_access = true under extension.capabilities as mentioned here - https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/configuration