CORS in 100 Seconds

Fireship · 693K views · 2021 · 2:31

Open on YouTube

Web developmentSecurity & hackingexplainer

Why Stack Overflow recommends it

Stack Overflow users link it when answering 'blocked by CORS policy' questions, as a quick visual explanation of why the error happens and why the fix belongs on the server.

Recommended by 6 people across 6 different months, 2020 to 2024.

What it is

A 2.5-minute Fireship explainer on Cross-Origin Resource Sharing (CORS), the browser mechanism that controls whether a page can request data from a different origin. It covers the basics of why the restriction exists and how servers opt in to allow cross-origin requests, with links to MDN and web.dev for more detail.

What people said

Recommends kissu · 2021-03 · Stack Overflow · on “POST call return CORS error even with right headers”

You need to allow your frontend app in the CORS of your backend app. 100 seconds of video, explaining how it works: [this video]

Recommends harvanchik · 2022-01 · Stack Overflow · on “I get forbidden when i'm trying to post from postman in spring boot app with keycloak and mysql docker containers”

Did you set up the CORS correctly? The origin that is requesting must be allowed to do so. Check out this video on CORS [this video] . In your main class for the Rest Application, there is a method called addCorsMappings that you can override. Add a mapping to the CorsRegistry. These should be the domains you expect to be calling the REST app from.

Recommends kissu · 2022-05 · Stack Overflow · on “How can I solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?”

I will assume that you're a front-end developer only and that you don't have access to the backend of the application (regarding the tags of the question). Short answer on how to properly solve this in your case? You can't, you'll need somebody else. What is this about? You need to understand that CORS is a security thing , it's not just here to annoy you just for fun. Its purpose is to mainly prevent the usage of a (malicious) HTTP call from a non-whitelisted frontend to your backend with some critical mutation. You could give a look to this YouTube video [this video] or any other one really, but I recommend a visual video, because text-based explanations can be quite hard to understand. You als

Recommends snippy · 2022-05 · Stack Overflow · on “react net::ERR_CONNECTION_REFUSED when try to GET data from backend node on localhost”

it does sound like a Cors problem here is a quick video explaining on how cors works [this video] try adding a proxy in the package.json or set a header like this res.setHeader('Access-Control-Allow-Origin', '*');

Recommends Lalaluka · 2022-08 · Stack Overflow · on “How to fetch data from password protected API in JavaScript?”

You need to disable CORS on the Server, not the Client. CORS is a protection mechanism for Servers. Here is a short explanation Video [this video] about cors. Setting your mode: 'no-cors' will not help you. It actually might make it worse. Your Python Code works because the Request does not originate from a "Website" it originates from a Server so no Origin will be set. Your Javascript, however, originates from a Browser and the Browser will send the origin for example localhost:8080 so the Server with activated CORS will block it.

Recommends Laurenz Honauer · 2022-11 · Stack Overflow · on “axios get request to express server is only successful for the first time”

Im not really sure why the first request is going through. But the error looks like a CORS problem. Basically, your frontend and backend run on different ports, which are treated like a different server altogether by the CORS checks. I took the following config from the cors package docs [LINK] var express = require('express') var cors = require('cors') var app = express() var corsOptions = { origin: ' [LINK] ', optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 } /* Or use this, if you want to bypass cors checks - not a safe practice var corsOptions = { origin: '*', optionsSuccessStatus: 200 } */ app.get('/products/:id', cors(corsOptions), function (req,

Recommends Muhammad Mahmoud · 2024-03 · Stack Overflow · on “Nuxt 3 SSR useFetch refetching data client side”

You have to setup your server to allow requests from your website origin. That doesn't happen on SSR because CORS is a browser feature. Servers can talk to each other without restrictions (unless you explicitly set up your server to specify who can call it). Browsers on the other hand implement several security features, one of which is CORS. These links are helpful if you want to better understand what CORS is [this video] Can someone explain to me what is Cross-Origin Resource Sharing(CORS) in the most simplest terms? [LINK] Complete Guide to CORS [LINK] Why does CORS exist in websites but not mobile or desktop apps? [LINK]

Cites JRichardsz · 2020-05 · Stack Overflow · on “How do i allow a CORS requests in my google script?”

Quick answer You (frontend developer) can't fix cors error from remote server. Only the owner of the remote server (google app script server) could do it. Workaround 1 (GET) Use only GET method in app script. Get method will not throw CORS errors, no matter where you consume it from: csr, spa, frontend, react, angular, vue, jquery, pure javascript, etc Workaround 2 (Backend) If you are in the backend server (java, php, c#, node, ruby, curl, etc) not in the frontend (browser, react, angular, vue), you could consume any method published on google apps script. CORS don't affect when the consumption is at the backend layer So if only use get endpoints are not an option for you, you could use ano

Cites Akash · 2021-06 · Stack Overflow · on “Node server with socket.io wont establish connection”

Cross Origin Resource Sharing is used so that a website cannot access resources of another website until it is allowed through server to by adding headers Access-Control-Allow-Origin: <Site Name> or Wild Card (*) As I think either you are directly opening HTML file or accessing it by another server so domains are going to differ, For ex. HTML File is opening at port [LINK] and WebSocket Server is running at port 3000 so that's why you are facing CORS. Solutions: CORS can be handled with in the socket.io refer this [LINK] or below code: const io = require("socket.io")(httpServer, { cors: { origin: "*", methods: ["GET", "POST"], credentials:true } }); Use npm cors [LINK] library in web server

Cites Code Awesome · 2021-12 · Stack Overflow · on “Unable to Connect to Backend”

lots of Mistakes Full source code var express = require('express') var cors = require('cors') var app = express() var bodyParser = require('body-parser') // create application/json parser var jsonParser = bodyParser.json() // create application/x-www-form-urlencoded parser var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use(jsonParser) app.use(urlencodedParser) app.use(cors()) app.post("/studentSignup", (req,res,next)=>{ console.log("ok"); }); app.listen(3000); First of all, it's app.post not app.use app.post("/studentSignup", (req,res,next)=>{ console.log("ok"); }); This might me due to cors [this video] You can use this npm package to encounter this error cors [LINK] insta