CORS, Preflight Request, OPTIONS Method | Access Control Allow Origin Error Explained

Подписаться 1,7 млн

Просмотров 334 тыс.

50% 1

What is CORS?
What is Cross Origin?
Are subdomain, host, port, protocol fall under Cross-Origin mechanism?
How does Cross Origin Request Sharing works behind the scenes?
What is CORS preflight?
What is the OPTIONS call?
What are the additional HTTP Headers required?
Does server always make Preflight options call in CORS protocol?
What browser versions support CORS?
Access Control Allow Origin Error?
How to solve CORS Error?
How to resolve CORS issue in Google Chrome?
MDN Link - developer.mozi...
If this video was helpful, give it a thumbs up and subscribe to my channel for more such videos. 🔔
Link to Subscribe: www.youtube.co...
If you want me to cover any specific topic, then comment down below. I would be happy to help you.
If you find my videos helpful,
then please support this channel by buying a coffee,
www.buymeacoff...
Cheers,
Akshay Saini
akshaysaini.in
Would love to Stay Connected with you ❤️
LinkedIn - / akshaymarch7
Instagram - / akshaymarch7
Twitter - / akshaymarch7
Facebook - / akshaymarch7
#Javascript #JavascriptInterviewQuestions #AkshaySaini

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 223

@vikramkrish710 5 лет назад

Hi Akshay, I learned a lot from this video. However I have a small correction to point out. At 06:50 you have written it as `accept-control-allow-origin: * ` while it is `access-control-allow-origin: *`. Extremely sorry for pointing out but some other beginner may capture it wrongly. Kindly put a patch message on screen while that portion is playing.

@HarshSingh-hk8fe 3 года назад

@@shankarnarayanb thanks alot for bro

@nabhoyar 2 года назад

Thanks Vikram for pointing out. It really helped to make out the difference

@pemadechen9199 Год назад

Wow it took me like more than a minute to find the difference between the two section. Certainly would have taken me a lot of time finding the solution. Thank you

@garudkardnyaneshwar3426 3 года назад

Bhai tune jo bataya na jis way m, jaise explain kiya man gaya teko aajtk smjhi nahi thi ye concept etni achese thank you man

@haverikakrishna Год назад

This is the reason why every developer is the fan and in love with you, you teach the things in the way they are to be delivered to the consumers/audience.. I want to mention this to, before whenever I used to watch content of any other youtuber it was quite obvious that I yawned for 2-3 times, but here whenever I watch your videos I never do that (or it wont come also), instead at this time I was very sleepy, but before going to sleep I just want to clear out this topic and now here I'm ready to move to you another video with full energy. Thanks bhaiya for making such a wonderful content..😍😍

@abhishekvishwakarma9045 3 года назад

Recently (two days back😁) I had my Full-stack Interview and they asked me about the middlewares😅 (Which I explained Using the example of Cors :) but that time I have only a little knowledge about cors (The interview went well but this question really scratch my head) And now after this, I can explain cors easily thanks to you sir😁🔥

@primetech505 Год назад

"Thank you, my friend, for providing such a straightforward and simplified explanation of how CORS works. Your explanation has helped me understand this topic better. Great job!"

@ayushbhardwaj6783 3 года назад

No other video could explain CORS soo briefly and easily. Thankyou Akshay♥️♥️

@DProgram-xb9pp 11 месяцев назад

Undoubtedly

@thatsalot3577 2 года назад

ok this is the first time someone actually explained what CORS is instead of just giving 10 different ways to get rid of the error, just a header ! lol

@rank3937 Год назад

Apart from detailed content, I admire your effort for including commonly asked interview questions.

@thesudeshdas 6 месяцев назад

Finally, I understand how CORS works. This was awesome. Got to learn a lot.

@subhajit99motivation Год назад

Thanks a lot Akshay, I was stuck at my project due to this, and your video resolved the issue. Doing great work bro. 😇

@HarshSingh-hk8fe 3 года назад

the way you explain cors is outstanding really loved it

@mayhemant 4 года назад

In beginning about 2 months ago I thought your videos are not of work! And 2 months later, here is me finding these very important and I have already seen most of your upload😂😂; Thank you Saini sir ❤️🦄🦄🦄🦄;

@AbdulQadir-eb1vi 3 года назад

Amazing work. I like the idea of explaining to whiteboard, really helped me understand the logic behind cors, this is what great teachers do.

@vishalmahavratayajula9658 4 года назад

Nice topic

@nabhoyar 2 года назад

Thanks Akshay for sharing beautiful explanation about CORS. Its really most frequently asked questions in interview.

@reginatoronto 3 месяца назад

Impressive, you won our hearts. Straight to the point

@emilandrzejewski7518 Год назад

Nice video showing what is going on under the hood. Personally, there was no live example showed in code, browser etc

@kushalbhargava8212 9 месяцев назад

Now i completely understood what cors is Thank you

@shraddhasonawane1491 4 года назад

Thanks @Akshay this video is so useful for not only a developer but Pentester like us.

@seifeslimene 3 года назад

Great explanation but there was a mistake in the video. the response header is access-control-allow-origin and not accept-control-allow-origin.

@vasilvasilev6225 2 года назад

Very explicit and right to the point explanation!

@vitalvisions4U 3 года назад

Hmm, got it. However, was expecting more details with example, like other videos in the interview series.

@shivankgoyal7737 2 года назад

This is what I was looking for!! Excellent video.

@programmingfitness6211 4 года назад

Hi Akshay ur way of explaining is 🔥, If u reading this then pls make a video on closure beleive me you will get blessings of many developers like me

@PatelNikhil 2 года назад

It would be helpfull if you can practically demonstrated this concept like your other videos you always start with your screen sharing. Please can you make other video with ref to this by showing on same localhsot with diff ports communicating with and without CORS compliances of header supported , it would be grate help to all of us if you can do this.

@disha9876 Год назад

So cool! , I'd love it if some images could pop as you speak to explain, than plain talking, it'll look interactive

@vinothkumarv9722 4 года назад

Wow awesome bro clear explanation love you !..... The image which you shared API request to data response from server is super....

@omprakashsharma281 3 года назад

Hi Akshay, as always, i learn something new from your video. Please create video on micro services as well Thanks

@laxman7620 3 года назад

Hey Akshay, Can you create Micro frontend learning video , it would be great to all developer for learning and also this concepts running in current market. Thanks in Advance

@neeve-gg7kz 3 месяца назад

Thank you for the wonderful knowledge. How to resolve the cors error

@akshay1363 4 года назад

hi ,your explanation is good and you mentioned something like CORS is not error and we make some mistake some thing kind of thing. can you explain more on that, what is mistake from our end if CROS policy not enabled at server end in which we don't have any control over it(i.e Third party API). 2) If don't have access or control over server side to make changes, how to Handel this error at client side??

@mohideenabdulkadhar4280 2 года назад

good explanation about CORS. it is very useful

@surbhirathi5753 4 года назад

hi Akshay, very well explained, but could you pl suggest what we can handle OPTIONS method timedout case just before POST? Thank you in advance!

@yashgupta-dw7sn 3 года назад

Best explanation in the market

@abhiagarwal281295 4 года назад

Good video, but the technical details were not conveyed properly. But yes, it does set up some pretext post which one definitely has to go through some online documents.

@nicetomeetugaming7024 2 года назад

Amazing video sir, very easy to understand.

@sameergaikwad222 3 года назад

Thanks Akshay :) This really helped in my understanding of CORS concept and resolving most request calls issue while developing projects :)

@ShivumJashnani 3 года назад

Beautiful video. Great job! Easy to understand.

@indiabest1744 4 года назад

Akshay bro can u pls create a series such that we can follow in sequence from beginner to advanced js and in bw those vedio interview q discussed as per that topic. Many people wanna learn core js from u and in sequence bro step by step . Automatic you will cover topic as asked intrvw

@vivekbisht6815 3 года назад

Please make series on microservices nowdays it is very popular not a good content avilable at youtube except you

@punnapranay9089 2 года назад

Thanks for the session, it was helpful. Can you make a session on csrf token. It would be helpful.

@ycombinator765 2 года назад

only a legend can explain legendary concepts

@sumeetjain1894 2 года назад

Hi Akshay, I really liked the video. There's a correction in the video where you've shown the example of preflight request require before the POST request. But POST is listed as a method that doesn't require preflights in CORS. It's DELETE, HEAD, PUT which generally requires preflight request.

@AnnaWD Год назад

It requires if data has some type that is not application/x-www-form-urlencoded || multipart/form-data || text/plain

@nitishrana848 3 года назад

Thanks man....this helped me a lot.

@fanatic12345 Месяц назад

Very nicely explained bro

@shaktisinhjhala5758 3 года назад

Perfect Video! thanks a lot for such a nice and detailed explanation about CORS :)

@starry589 8 месяцев назад

Thanks! Forever thankful!

@sameergaikwad222 4 года назад

Hi Akshay Thanks for guiding. Can you put light on how to make pre-flight request ? any tutorial or guide ?

@RaghuVN 3 года назад

These restrictions are implemented by browser. Normally, there won't be any use case where you will have to do it yourself. If you do have to, then you can do it using Javascript.

@rahulkumbhar4446 3 года назад

Thank you Akshay...this is really helpful 👍

@user-mi8ew2to8e 4 года назад

Akshay Saini's voice is very similar to Akshay Kumar

@akshaymarch7 4 года назад

😂

@YogaJourneyWithSukhjitKaur 3 года назад

Very useul resource ! Thank you

@paragchoudhary509 Год назад

Special thanks for this video 🤟💯💯

@BearVodkaAndValenki 2 года назад

Great explanation

@sahilraj4735 3 года назад

Can you explain about access-control-allow-headers:content-type, x-session specially what is x-session in details.

@mdsujan6686 3 года назад

What a gem! Thank you sir.

@auroshisray9140 Год назад

Thanks a lot! Great video bhaiya

@nityadeepika1967 3 года назад

Thankyou so much for this video

@vidhya821 3 года назад

Thanks for the video Akshay! But can you have the light source directed at the white board and not at the top? its difficult to see the content written with the overhead lights.

@abhijeetgupta3461 Год назад

Can you please tell us what is the criteria on which the server validates the preflight call, I mean how the server decides whether to allow a request

@mohitdiwakar9558 3 года назад

Very nice explained

@uimonk 9 месяцев назад

awesome yaar... well explained!!

@Su_Has 3 года назад

Aren't front end and back end of a web application hosted on different domains? How does that not cause CORS issue?

@akhileshrai7908 2 года назад

Acess control allow type of header is from server side browser sends (request) type of header

@rishabgupta3419 8 месяцев назад

Nice explaination

@SajidAliSoftwareEngineer 3 года назад

awesome brother really nicely you explain.

@j4jainam 2 года назад

Nice Demo, But In my case I am only allowed to permit specific Origins so I can use the way of "Multiple origins" but my "Multiple origins" are not in my hand.. it is coming from a database table.. so How Can I use it ???

@krishnanigalye1173 4 года назад

I didn't get the part where you said preflight calls are made to check if the request is valid/safe. I mean in what sense it should be safe/valid?

@pratikmehta6207 3 года назад

Thanks a lot great content, But I was thinking how postman can do, without cors at server, and if this is possible, how security is there, anyone can do any request from postman, because no core error there, and although it looks, security on server side, that no out of defined domain can make request, so why browser is doing it, like it's not enhancing any security for client-side.

@qsayeed67 3 года назад

Actually its your browser, which check Access-Control-Allow-Origin header in response and throw CORS error. In the case of POSTMAN, postman doesnot check this header after getting response.

@abhishekpradhan7824 2 года назад

Somehow he managed to clear the interview ,that doesn't mean anyone can clear the interview by following these videos

@MuhammadIbrahim0856 7 месяцев назад

A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request . To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values. Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque). my error me tell me

@_hulk748 4 месяца назад

Great Video Sir

@harshulkansal 3 года назад

Great work man! thanks

@marcinkubicki1766 4 месяца назад

Hey, great video man

@ehabahmedyassen Год назад

10:35 I have just learned about CORS recently and I have a question about by-passing CORS security mechanism. As I understand; the CORS configurations are made at the server side to handle cross origin resources access/sharing. So, does it even make sense to have a browser plugin or to start the browser with specific flags to by-pass CORS?

@harshitakohli9308 Год назад

Yes even I have the same doubt... If we start our browser with '--disable-web-security ' flag, the browser does not send the preflight request and neither does it validate CORS headers, then how does the server still send back response to the browser?

@vasanthram2776 2 года назад

thanks for this video

@Siddharth-uo6zw Год назад

came here while learning namaste React🙏

@Rs-vp5hw 2 года назад

Hi Akshay, api calling twice one is options and 2nd one is post request .can we hide that option request into the network?

@swarnendustudy1792 2 года назад

very helpful video

@lifeisbeautifu1 Год назад

Thank you

@sahilraj_1724 3 года назад

can you explain what does this mean access-control-allow-headers: content-type,x-session specially x-session

@Quantnom Год назад

I am having an issue with my django and react app sending options request but then not being able to send the post... it succesfully sends the OPTIONS with 200 code, then the post + Preflight doesnt work....

@berglinviclito5470 2 месяца назад

I am a junior frontend developer. I have an issue with the cors as u mentioned in the last part of the video . They asked me to resolve it by having a chrome extension called CORS UNBLOCK , But then again i can't able to bypass the error . So my question is there any possibility that the error will not be resolved after having the extention?

@jenks2897 2 года назад

What if I don't what to access or change any data just want to click a button on website A which then clicks or simulate a click on website B and execute a function, does this falls under CORS ? If not any suggestion on how this can be done?

@kirajcs 3 года назад

Bro, Fantastic Job!

@ruchinbaliyan9785 3 года назад

Thank you for the details, But I am getting {has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.} this cors error , Any idea about this ?

@pavankumar-of4ew 2 месяца назад

yesterday i encountered the same problem in promises while fetching simple jsonplaceholder api,there it didn't allow in js compiler Blocking api url req

@jyoti1221 2 года назад

Hello sir , we using cors so that if anyone hit the api .he should be authorised first. So i wanted to uses headers of this cors request becoz in our case login and api hitting functionality is different? Please reply soon 😩😩

@suniltripathy1399 3 года назад

Accept-control allow origin or Access Control Allow Origin??

@travisbickle6966 3 года назад

Thanks You Bhai

@PrudhviRoyals 2 месяца назад

Can we disable preflight request. how can we do that one .

@piyushtiwari6471 Год назад

I watched some MERN app tutorials using cors() middleware on express server side to allow reaact app to hit express api routes, Is that bypassing and compromising the security somehow? Because server side doesnot have app any specific port info(for local development) as to which origin to allow and which not 🤔