Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Monday, March 10

    No More CORS Errors : Understand it and use a free tool to bypass Cross-Origin Restrictions

    Updated: Article 421 Comments5 Mins ReadAjay MahiwalBy

    Do want to make some HTTP request to some enpoint but not able to make because of Browser feature, which is called CORS.

    CORS, or Cross-Origin Resource Sharing, is a security feature implemented by web browsers to control how resources on a web page can be requested from another domain outside the domain from which the resource originated.

    Example:

    My domain is localhost:3000 and Other domain is api.example.com . So now if i want to make a request from my local server to other server which have different domain. Then a flow of CORS request will started.

    Flow of CORS request :

    1. Initial Request:

    You (the client) attempt to make a request to a resource (like an API endpoint) located on a different domain (let’s call it https://api.example.com) from the domain of your current page eg.( localhost:3000 ).

    2. Preflight Request:

    Condition: If your request is considered a “complex request” by the browser, meaning it uses methods other than GET, HEAD, or POST, or it includes headers other than simple headers (like Content-Type), the browser will automatically initiate a preflight request.

    Preflight Request: The browser sends an HTTP OPTIONS request to the server (https://api.example.com) to determine if the actual request (e.g., POST, PUT, DELETE) is safe to send. This preflight request includes headers such as Origin, Access-Control-Request-Method, and Access-Control-Request-Headers.

    – Server Response: The server (https://api.example.com) must respond to this preflight request with appropriate CORS headers:

    – Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource (* for all, or specific domains like https://www.yourwebsite.com).

    – Access-Control-Allow-Methods: Lists the allowed HTTP methods for accessing the resource (GET, POST, PUT, etc.).

    – Access-Control-Allow-Headers: Lists the allowed headers that can be used in the actual request.

    The preflight request ensures that potential cross-origin requests are safe and authorized before the actual data exchange occurs, maintaining security and integrity on the web.

    3. Actual Request (if approved):

    Condition: If the server responds to the preflight request with appropriate CORS headers and indicates that the actual request is allowed (Access-Control-Allow-Origin includes the origin of your request and any required methods/headers are allowed), then the browser proceeds to send the actual request (e.g., POST, PUT, DELETE) to https://api.example.com.

    Which means that https://api.example.com server is allowing you to make that request and you can access that.

    – Server Response: The server (https://api.example.com) processes the request and sends back the response.

    4. Handling Responses:

    Success: If the server responds with a successful status (e.g., 200 OK), the browser allows your client application to access the response data.

    Error: If there are CORS-related errors (e.g., mismatch in allowed origin, methods, or headers), the browser blocks the response data from being accessed by your client application, adhering to the same-origin policy.

    Solution of CORS error :

    So because of browser built-in security feature we are not able to make a request on different domain. But we can bypass this using plugin and some extensions but that not right approach, it can break the security of browsers and sometimes these things not work well.

    Now for developer community i made something interesting which is called cors-handler. It basically act as a proxy sever and will make request on give url path or domain which you want to access. It will not give you any kind of CORS related errors because in our server setting configuration we are allowing all the origins to access our services.

    Now you don’t have to make direct HTTP request to another domain or path-url to access something, use our path-url to access another domain :

    “https://handler-cors.vercel.app/fetch“

    Note: I’m helping the developer community and no any charges will be taken from you. It is a free service and I’ll maintain it for you guys.

    How to use cors-handler??

    Make sure that you use right endpoint which is /fetch, make POST request and also send a url key field in body object with its value.

    We have provided some example using fetch and axios in these examples you just have to change the “https://www.example.com/api/endpoint” with right url which you want to access.

    You can use any approach from given examples:

    – Using fetch

    //Define an async function to make the POST request
async function getData() {

try {

const res = await fetch("https://handler-cors.vercel.app/fetch", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
url: "https://www.example.com/api/endpoint", //Replace 
this example url with right url which you want to access
})
});


if (!res.ok) {
throw new Error(`Error: ${res.status} ${res.statusText}`);
}


const raw = await res.json();
console.log(raw); // see raw in console

} 
catch (error) {
console.error("Error fetching data:", error);
}

}



getData(); //calling the function

    – Using axios

    const axios = require('axios'); // install axios 
or use can use CDN Link of it



// Define the data to be sent
const bodyData = {
url: 'https://example.com/api/endpoint', //Replace this
 example url with right url which you want
};


// Define the config with headers
const config = {
headers: {
'Content-Type': 'application/json',
}
};


// Define an async function to make the POST request
async function getData() {

try {
const response = await axios.post("https://handler-cors.vercel.app/fetch", 
bodyData, config);
console.log('Response:', response.data);
} 
catch (error) {
console.error('Error:', error);
}

}


getData() // calling the function

    Keep Reading

    View 421 Comments

    421 Comments

    5. mua traffic user on

      Thanks , I’ve just been looking for info approximately this topic for a longtime and yours is the greatest I’ve found out so far.But, what about the conclusion? Are you positive concerning the supply?

      Reply
    6. Best Seo Techniques on

      Normally I don’t read article on blogs, but I wouldlike to say that this write-up very compelled me to take a look at and do it!Your writing style has been surprised me. Thanks,quite nice post.my blog post – click to find out more

      Reply
    14. sex porn on

      Thanks for the marvelous posting! I definitely enjoyed reading it, you might be a great author.I will make sure to bookmark your blog and will often come back later on. I want to encourage continue your great writing, have a nice day!

      Reply
    15. VSM on

      What’s Happening i’m new to this, I stumbled upon this I have discovered It positively useful and it has helped me out loads. I’m hoping to give a contribution & aid other customers like its helped me. Good job.

      Reply
    17. 18+ porn on

      Very nice post and right to the point. I am not sure if this is actually the best place to ask but do you people have any thoughts on where to employ some professional writers? Thx 🙂

      Reply
    94. Kendra Hudson on

      Thank you, I ave recently been searching for information about this topic for ages and yours is the best I have discovered till now. But, what about the bottom line? Are you sure about the source?

      Reply
    96. magnetfeldmatte test on

      An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

      Reply
    102. binance on

      Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

      Reply
    105. 貼街招 on

      I’m still learning from you, but I’m trying to achieve my goals.I certainly enjoy reading everything that is written on your blog.Keep the aarticles coming.I loved it!

      Reply
    129. takbet on

      I like this web blog very much, Its a very nice berth to read and incur information. “God cannot alter the past, but historians can.” by Samuel Butler.

      Reply
    141. Lekisha Kuchar on

      I do not even know the way I stopped up here, however I assumed this publish was once great. I do not know who you might be however certainly you’re going to a famous blogger in the event you aren’t already 😉 Cheers!

      Reply
    144. Janessa Bundage on

      You actually make it seem so easy with your presentation however I to find this matter to be actually something that I think I would never understand. It sort of feels too complicated and extremely wide for me. I am taking a look forward to your next publish, I will try to get the hang of it!

      Reply
    145. Ricardo Hollifield on

      You actually make it appear really easy together with your presentation however I find this matter to be actually one thing which I think I would by no means understand. It kind of feels too complicated and very extensive for me. I’m taking a look ahead in your next post, I will attempt to get the hang of it!

      Reply
    148. Vanessa Schwein on

      I was just searching for this information for a while. After 6 hours of continuous Googleing, finally I got it in your web site. I wonder what is the lack of Google strategy that don’t rank this kind of informative web sites in top of the list. Generally the top sites are full of garbage.

      Reply
    161. Rentar auto en Bogotá on

      I like the valuable information you providefor your articles. I’ll bookmark your blog and checkonce more here frequently. I’m moderately sureI will be informed a lot of new stuff proper here! Best of luck for the next!

      Reply
    162. Noma Cotler on

      When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same comment. Is there any way you can remove me from that service? Thanks a lot!

      Reply
    185. Emelia Ciarletta on

      Wow that was unusual. I just wrote an really long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say wonderful blog!

      Reply
    260. E-Filing Services on

      That is the precise weblog for anybody who desires to seek out out about this topic. You understand a lot its nearly arduous to argue with you (not that I truly would want…HaHa). You undoubtedly put a new spin on a subject thats been written about for years. Nice stuff, simply nice!

      Reply
    310. click here on

      Heya i’m for the first time here. I found this board and I in finding It truly helpful & it helped me out a lot.I am hoping to present one thing again and help others likeyou helped me.

      Reply
    366. belly dancers accountant on

      Hey there! I know this is kind of off topic but I was wondering if you knew where I could get a captcha plugin for my comment form?I’m using the same blog platform as yours and I’m having trouble finding one?Thanks a lot!

      Reply
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us