React front-end not connecting to motoko backend after a successful deployement on ICP network

In my react front-end I am accessing the motoko backend functions by this line of code import { mytodo_backend } from "../../../declarations/mytodo_backend/index";, locally everything is working fine and i can persist the data to the backend without any problem, but after deploying the front-end appears to just be working on its own and not connect to the backend at all. The project is a simple todo dapp. This is the link to my github repo of the project..

Is the @dfinity/agent package on the latest version? It could be the same problem as in the same thread where calls don’t work to the old URL

1 Like

The @dfinity/agent package is latest I updated it but nothing have changed. But I just saw this error in the browser console on the deployed front front-end.

dex.js:2 Refused to connect to 'https://icp0.io/api/v2/canister/jz3aw-xqaaa-aaaal-qbyna-cai/query' because it violates the following Content Security Policy directive: "connect-src 'self' https://ic0.app https://*.ic0.app".

If I try to access my front-end at .ic0.app I am getting 404 error. How can I fix this?

In your frontend assets/source you should find one or two files called .ic-assets.json or .ic-assets.json5. These contain content security policy headers that are most likely still only targeted at ic0.app instead of icp0.io. Replace those with the headers from the updated starter template here. Then, if you’re not on dfx 0.14 yet, redeploy your asset canister with --mode reinstall to force-update the headers

2 Likes

Fixed, I just replaced those files and redeployed. Thank you so much.

1 Like