DEV Community

Rajesh Joshi
Rajesh Joshi

Posted on

blocked by CORS policy? CORS Proxy is Solution 😎

❓ What is CORS?

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading of resources. CORS also relies on a mechanism by which browsers make a β€œpreflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

CORS Error Example


πŸ€” What is the Solution?

The solution to bypass CORS is to use a Proxy. A Proxy server, that forwards your request as it is.

But, problems with a Proxy Server is to manage the server, optimize the server, handle traffic, use of Kubernetes to minimize bills, and what not.

😭😭 So what is the solution to this?


✨ CORS Proxy ✨

CORS Proxy provides Free Service to bypass CORS.

CORS Proxy API uses backend technologies to complete your request for any third party resource . You are just required to send all request data (ie. URL, params, body, headers, cookies, etc.) to CORS Proxy API End-Point in the body, CORS Proxy will then forward your request in an optimized manner.


Sample Code

var axios = require("axios").default;

var options = {
  method: 'POST',
  url: 'https://cors-proxy1.p.rapidapi.com/v1',
  headers: {
    'content-type': 'application/json',
    'x-rapidapi-host': 'cors-proxy1.p.rapidapi.com',
    'x-rapidapi-key': 'YOUR-x-rapidapi-key'
  },
  data: {
    url: 'https://api.gymslate.ml/auth/login/',
    method: 'POST',
    params: {},
    data: {
        email: 'user@mail.com',
        password: 'SecurePassword'
    },
    headers: {},
    cookies: {}
  }
};

axios.request(options).then(function (response) {
    console.log(response.data);
}).catch(function (error) {
    console.error(error);
});
Enter fullscreen mode Exit fullscreen mode

Free to use

CORS Proxy offers FREEMIUM pricing model. So Yes, we can start with the Free Plan

CORS Proxy

Step 1. Create a Free Account at Rapid API

Step 2. Freely Subscribe to Basic Plan

Step 3: Test API End Points

Alt Text

Step 4: Integrate with your Frontend Project


πŸ₯³ No more CORS Errors πŸ₯³


Cheers

πŸ€“ Happy Coding

Discussion (0)