为什么我的网站上突然出现“没有 'Access-Control-Allow-Origin' header is present”错误？

Question

I was creating server blocks in my DigitalOcean server aso I could host two websites from the same droplet and I think I got it to work but the website was broken. I opened my code in VSCode and ran it with npm start and nodemon and I'm getting this error when I try to pull data from the Pokeapi:

Access to XMLHttpRequest at ' https://pokeapi.co/api/v2/pokemon/charizard/ ' from origin ' http://localhost:3000 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is the same error I get on my live website. I've spent the last few hours trying to figure out what I can do to no avail. I'm wondering if this is a problem with the Pokeapi or with me because I went on my phone to the website and it's working perfectly fine. I'm really bummed because I need to find a job and I don't think anyone would want to hire me with a broken website. If anyone wants to see parts of my code I will show it. Any help is much appreciated.

Answer 1

With the help of Kasey Chang I was able to figure out a fix. This is how the top of my server file looked before the fix:

require('dotenv').config();
const {CONNECTION_STRING, SESSION_SECRET, SERVER_PORT} = process.env;
const express = require('express');
const app = express();
app.use(express.json());
const massive = require('massive');
const session = require('express-session');

And I created my own proxy so now it looks like this:

require('dotenv').config();
const {CONNECTION_STRING, SESSION_SECRET, SERVER_PORT} = process.env;
const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.use(express.json());
const massive = require('massive');
const session = require('express-session');

Now my website is working again. I hope this helps anyone that runs into the same problem.