I have problem to add FB comments section to my website where I using React.JS and its facebook library 'react-facebook'. There is a code.
import styled from 'styled-components';
import Head from '../components/Head';
import Navigation from '../components/common/Navigation';
import Footer from '../components/common/Footer';
import Content from '../components/common/Content';
import { useRef} from 'react';
import { Comments, FacebookProvider } from 'react-facebook';
export const Heading = styled.h2`
text-align: center;
padding: 0 0.5em;
font-family: 'Nothing You Could Do', cursive;
font-display: swap;
font-weight: 700;
font-size: 4rem;
margin-bottom: 2rem !important;
margin-top: 2rem;
`;
function OpeningPage() {
let isAuth = useRef<string | null>(sessionStorage.getItem('accessToken'));
return (
<>
<Head title={'Zoo Admin'} />
<Navigation />
<>
<Content>
<Heading className={'heading'}>
{!isAuth.current ? 'Basic zoo admin app' : 'Hey, You are logged in !'}
</Heading>
<FacebookProvider appId="846385830401827">
<Comments href="http://www.facebook.com" />
</FacebookProvider>
</Content>
</>
<Footer />
</>
);
}
export default OpeningPage;
I have this error at console and don't have any clue.
Access to script at 'about:blank' (redirected from 'https://connect.facebook.net/en_US/sdk.js') from origin 'http://localhost:4001' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.
Facebook.ts:139
GET about:blank net::ERR_FAILED
How can I please fix this error and make comments visible?
I tried change app mode from development to online. This doesn't work.