Unclear use of ic-assets.json

Developers JavaScript
1

Hello,

To start, what I am trying to do: I want to call an external api from the user interface. In order not to get a CORS exception I want to add the Access-Control-Allow-Origin header. I understand that I can add an .ic-assets.json file and I could configure my header inside.

I based my work on documentation below:
New feature: support for configuring assets in assets canister

My steps:

  1. Create file .ic-assets.json
[
    {
        "match": ".*",
        "headers": {
            "Access-Control-Allow-Origin" : "http://127.0.0.1:8000"
        },
        "ignore": false
    }
]

  1. I save it into ./asset folder

  2. I deploy with —clean to ensure the recreation of the canister

  3. on the fetch call I still got an exception

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

If I debug the request I don’t see the header

Note if I add malformed .ic-assets.json the deploy command fail so the file is deployed.

Do I have a misunderstanding the use of .ic-assets.json ?

How do you call an external API by respecting CORS ?

Thanks

2

Try this, unless the filename you want to affect actually starts with a dot. The example from the documentation you linked is intended to include normally hidden files (which have a filename starting with .) as assets.

        "match": "**/*",
3

Thank you but it doesn’t change anything.
But this is one of my doubts, does it apply to my case. Is there a regex in match?

I should point out that:

The page that contains the request is a react page
its url is http://127.0.0.1:8000/?canisterId=r7inp-6aaaa-aaaaa-aaabq-cai#/contact

in this page I have the request:

export function emailReputation(email) {
    // encodeURIComponent(email)
    const options = {method: 'GET' ,headers: {'Accept': 'application/json',Key: 'yyyxxx','User-Agent': 'myapp'}};
    fetch(`https://emailrep.io/${encodeURIComponent(email)}`, options)
        .then(response => response.json())
        .then(response => console.log(response))
        .catch(err => console.error(err));
}
4

Yes, match is a regex. However, that’s not the problem here.

The issue is that dfx doesn’t currently copy the .ic-asset.json files that would be stored alongside your index.html or index.js into the dist/ directory, and so it doesn’t apply any of the rules in that .ic-asset.json file.

1 Like
5

thank you, it allows me at least to validate that this approach is not adapted to my case.

6

hey @rbolog, the fix is underway :slight_smile:

you can expect to have this working in next dfx release (0.12.0)

2 Likes
7

Thanks for the information and sharing, I will not miss to try this!

1 Like