My current project involves creating a social media management app using Nest.js and Next.js. Passport Facebook has been set up on my server side and tested on the server side, and it works well. When I move to the client side and attempt to verify if the access token is saved on the database or not, i sent a request to the endpoint 'api/social-accounts/facebook', but Facebook seems to block it. This is the error message I received. : 'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.facebook.com/v3.2/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fapi%2Fsocial-accounts%2Ffacebook%2Fcallback&client_id=1169598374207494. (Reason: CORS request did not succeed). Status code: (null).' here is my controller :

@Controller('api/social-accounts') export class SocialAccountsController {   constructor(private readonly socialAccountService: SocialAccountsService) {}   @UseGuards(AuthGuard('facebook'))   @Get('facebook')   async getAccessToken() {     console.log('arrived here. [get access token]');   }   @Get('facebook/callback')   @UseGuards(AuthGuard('facebook'))   async facebookAuthCallback(@Req() req: any) {     const { socialAccount, user } = req;     const { accessToken, profile } = socialAccount;     await this.socialAccountService.saveSocialAccountAccessToken(       {         access_token: accessToken,         expires_in: null,         social_user_id: profile?.id,       },       user,     );     return 'Your account has been connected.';   } } 

here is my facebook strategy :

import { Injectable } from '@nestjs/common'; import { ConfigService } from '@nestjs/config'; import { PassportStrategy } from '@nestjs/passport'; import { Strategy } from 'passport-facebook'; import { SocialAccountsService } from '../social-accounts.service'; @Injectable() export class FacebookStrategy extends PassportStrategy(Strategy, 'facebook') {   constructor(private readonly config: ConfigService) {     super({       clientID: config.get<string>('APP_ID'),       clientSecret: config.get<string>('APP_SECRET'),       callbackURL:         'http://localhost:8000/api/social-accounts/facebook/callback',       profileFields: ['id'],     });   }   async validate(     accessToken: string,     _refreshToken: string,     profile: any,     done: any,   ): Promise<any> {     const socialAccount = { accessToken, social_user_id: profile.id };     console.log({ socialAccount });     done(null, socialAccount);   } } 

I am try to connect the facebook account without using passport but still has seem issue. Adding a mechanism to authenticate to the app with a Facebook account is not something I want to do. I want the user to be able to add their Facebook account to the app to manage it.