Cors Error

[Ranjit1Das]

I am Using react messenger-customer-chat package in my react application, it throws cors policy errors in the production server(Google compute engine VM Server). The error is something like below...

Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/facade_gating/?page_id=110801524801659&suppress_http_code=1' from origin 'http://34.71.47.125' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any help or suggestion will be highly appreciated.

[tw0517tw]

Have you whitelisted your domain in your Facebook app following the official doc (https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/#whitelist-the-domain-of-your-website)?

[Ranjit1Das]

Thanks, Brother, Yes, I have white-listed my domain in the facebook advance page messaging setting but still, I got the cors error when my application run on the production server.

Regards, Ranjit Das. Dhaka, Bangladesh.

On Mon, Jan 10, 2022 at 7:59 AM 吳東曄 Wu, Dung-Ie @.***> wrote:

Have you whitelisted your domain in your Facebook app following the official doc ( https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/#whitelist-the-domain-of-your-website )?

— Reply to this email directly, view it on GitHub https://github.com/Yoctol/react-messenger-customer-chat/issues/106#issuecomment-1008485717, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHQUU5WUBILYW35EAYAV3T3UVI4R3ANCNFSM5LRTVPTQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[raphaels17]

same here

[Rupal-Malik-au9]

🖐Hello everyone, I was also getting these error. I found that the pageId, I was using was wrong🤦‍♀️. These errors come only when your pageId is wrong or the domain is not whitelisted properly(I even tried with a ngrok url and it worked😵).

So the steps which I followed were-

1)In buisness.facebook.com go to inbox from sidebar and select chat plugin.[https://i.stack.imgur.com/rDk5d.png]

2)Click on setup to add your domain. [https://i.stack.imgur.com/exOi2.png]

3)Pick a setup method(standard for react/nextjs) and setup chat plugin(add language, domain , copy code and paste it) [https://i.stack.imgur.com/hDArZ.png]

4)You can add multiple domains[https://i.stack.imgur.com/zGdgx.png]

5)You will get pageId already embedded[https://i.stack.imgur.com/iRT13.png]

use this code and paste it in _document.js file in nextjs. and after deploying it will work perfectly. For any confusion please let me know. Thanks, Happy Coding ☺

[belkocik]

same here... how to fix it? I followed this tutorial: https://www.youtube.com/watch?v=8e_4KIj4jBs

[Rupal-Malik-au9]

@bubuq3 I was also getting error with this library instead of using this react-library Login to business.facebook.com => go to inbox from sidebar and select chat plugin..[https://i.stack.imgur.com/rDk5d.png] you will see a button for setup plugin there are 4 steps follow it and it will work. You will also get code to paste. Use that.

If you have any confusion, please check my previous message (I have added steps with Images)

[belkocik]

@Rupal-Malik-au9 Where am I supposed to copy this Messenger Chat Plugin Code in react/next.js app? Ok, find some solutions: https://stackoverflow.com/questions/68463559/how-to-add-facebook-chat-messenger-to-next-js what is yours?

[Rupal-Malik-au9]

@bubuq3 I pasted the code directly after body tag in _document.js

[Ranjit1Das]

Have you solved your problem?If you still faced Cors error , I can help you. I faced a Cors error in one of my applications a month ago and I figured it out myself.

On Thu, Feb 17, 2022 at 2:56 PM Rupal Malik @.***> wrote:

@bubuq3 https://github.com/bubuq3 I pasted the code directly after body tag in _document.js

[image: image] https://user-images.githubusercontent.com/60615457/154440381-4da3ac04-0910-4b78-b9a1-a28baa81dbf1.png

— Reply to this email directly, view it on GitHub https://github.com/Yoctol/react-messenger-customer-chat/issues/106#issuecomment-1042713307, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHQUU5SK7F2OEUQWVTMBOZ3U3SZ4FANCNFSM5LRTVPTQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[belkocik]

Have you solved your problem?If you still faced Cors error , I can help you. I faced a Cors error in one of my applications a month ago and I figured it out myself.

Would be nice if you share the solution here for all of us. Thank you! :)

[reefco]

I had trouble with the same issue. Turns out you can't test it locally, even if you add your ip to the whitelisted domains. I was getting very frustrated with every answer being to just add your domain and check your ID! When I host my site locally, I get CORS errors and restricted access errors. I published my development website and whitelisted my development domain, and it worked right away. I believe it is because the plugin only supports HTTPS.