[HELP] 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
Unanswered
Masai Lion posted this in #help-forum
Masai LionOP
So I am a newbie on nextjs and I tried following a youtube course as usual. the app I am building rn is a trello clone with appwrite here's the tutorial I've been following; [[https://youtu.be/7DVdVGm7Ht8\?si\=XKMVP_ZO2DcrytZv\&t\=8191]] it will start on the appwrite implimantation. I followed line by line and Idk why I am getting this error.
38 Replies
@Masai Lion So I am a newbie on nextjs and I tried following a youtube course as usual. the app I am building rn is a trello clone with appwrite here's the tutorial I've been following; [[https://youtu.be/7DVdVGm7Ht8\?si\=XKMVP_ZO2DcrytZv\&t\=8191]] it will start on the appwrite implimantation. I followed line by line and Idk why I am getting this error.
Danish-Swedish Farmdog
Are you using different server for your application? for example expressJS for your nextJS web app.
Asian black bear
I don't think many people are going to watch the video to guess what is wrong with your code. Could you maybe share at least what is making the request and the api handler?
@Asian black bear I don't think many people are going to watch the video to guess what is wrong with your code. Could you maybe share at least what is making the request and the api handler?
Masai LionOP
appwrite.ts;import { Client, Account, ID, Databases, Storage } from "appwrite";
const client = new Client()
.setEndpoint("https://cloud.appwrite.io/v1")
.setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!);
const account = new Account(client);
const databases = new Databases(client);
const storage = new Storage(client);
export { client, account, databases, storage, ID };@/lib/getTodoGroupByColumn.ts;import { databases } from "@/appwrite";
export const getTodoGroupByColumn = async () => {
const data = await databases.listDocuments(
process.env.NEXT_PUBLIC_DATABASE_ID!,
process.env.NEXT_PUBLIC_TODOS_COLLECTION_ID!
);
console.log(data);
};@Pollock search code with antonio
Masai LionOP
and?his video(s) are great but I want to finish first my current project before on doing a new one
@Masai Lion and?his video(s) are great but I want to finish first my current project before on doing a new one
Asian black bear
It has to do with adding your app domain in appwrite, and telling it requests from apps on localhost are allowes
Also of note; cors does not apply to fetch in server components
@Asian black bear It has to do with adding your app domain in appwrite, and telling it requests from apps on localhost are allowes
Masai LionOP
I did put
localhost on appwriteAsian black bear
localhost and localhost:3000 are not the same thing
for CORS
@Masai Lion I did put `localhost` on appwrite
Danish-Swedish Farmdog
you ca just use wildcard or specisfy the port
@Asian black bear for CORS
Masai LionOP
pardon for the late response but I already tried putting localhost:3000 it won't allow it
@Danish-Swedish Farmdog you ca just use wildcard or specisfy the port
Masai LionOP
already did but still same issue
Danish-Swedish Farmdog
did you try wildcard too?
@Danish-Swedish Farmdog did you try wildcard too?
Masai LionOP
yes, I tried; localhost:300, localhost:, localhost and *
Danish-Swedish Farmdog
also try typing http://localhost:3000 or https://..... depended on your protocol
Masai LionOP
http is my protocol, appwrite don't accept paths and protocols or ports
Danish-Swedish Farmdog
const nextConfig = {
async headers() {
return [
{
source: "source path",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "origin" },
{ key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
{ key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
]
}
]
}
}You may need to specisfy the config too in nextjs
@Danish-Swedish Farmdog js
const nextConfig = {
async headers() {
return [
{
source: "source path",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "origin" },
{ key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
{ key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
]
}
]
}
}
You may need to specisfy the config too in nextjs
Masai LionOP
I saw this but I don't if I need change anything or just need to copy paste in my nextjs config
I will try copy pasting it first xD
@Masai Lion I saw this but I don't if I need change anything or just need to copy paste in my nextjs config
Danish-Swedish Farmdog
instead of origin you should type address
and path should be something like /api or so...
specific path of your api
try researching that
Masai LionOP
path or url?
Danish-Swedish Farmdog
url
Masai LionOP
invalid header it says
Danish-Swedish Farmdog
source shouldnt be a link. it needs to have api specific path. for example if it's "/api/:path*" every request sent starding with /api/something will get that headers
havent used it many times so try searching the detaild info for that
I may be incorrect in some areas
@Danish-Swedish Farmdog source shouldnt be a link. it needs to have api specific path. for example if it's "/api/:path*" every request sent starding with /api/something will get that headers
Masai LionOP
ohh I get it, my bad. but I don't have api folder here + I am just following what I see on the videoTT, I am thinking to deploy this on vercel and get the custom domain on it and I will check if the cors issue still occur
anyway, thank for your time

Danish-Swedish Farmdog
try watching this video to get overall info on that https://www.youtube.com/watch?v=PNtFSVU-YTI
@Masai Lion and?his video(s) are great but I want to finish first my current project before on doing a new one
Pollock
Because you are following a video that doesnt seems great. 6 apps in 18 hours sounds like I'm going to learn speedrun code bs
@Pollock Because you are following a video that doesnt seems great. 6 apps in 18 hours sounds like I'm going to learn speedrun code bs
Masai LionOP
I am just following thw first app tho, because it is what I want to build
@Danish-Swedish Farmdog try watching this video to get overall info on that https://www.youtube.com/watch?v=PNtFSVU-YTI
Masai LionOP
already done and because I don't know how my code works Idk what to change and what not to hahahaha