CORS ERROR

A CORS error (Cross-Origin Resource Sharing error) occurs when you're trying to make a request from one website (or domain) to another website, and the browser blocks the request for security reasons.

​

​Why CORS Error Occurs -
​CORS errors occur when a web page tries to access data or resources from a different domain, and the server of that domain hasn't granted permission for the request by including the appropriate CORS headers in its response. This security mechanism helps prevent unauthorized access and protects users' data and privacy.

• Same-Origin Policy: Browsers have a security policy called the Same-Origin Policy. It's a fundamental security feature that prevents web pages from making requests to a different domain than the one that served the web page. This policy exists to protect users from potentially harmful actions by other websites.
• ​Cross-Domain Requests: When a web page attempts to make an XMLHttpRequest or fetch data from a different domain (different origin), the browser checks if the server hosting the requested resource explicitly allows such requests. This is done through CORS headers.
• CORS Headers: To allow cross-origin requests, the server hosting the resource must include specific CORS headers in its response. These headers tell the browser which domains are permitted to access the resource. If the server doesn't include these headers or doesn't include the requesting domain in the list of allowed origins, the browser blocks the request and triggers a CORS error.
  ​
  Note: If the API is running on localhost and you are still experiencing a CORS issue, it's likely because the API is running on a different port than your web application. MSG91 API does not allow cross-domain requests you will need first to make the request to your server and then call the API from there.
  ​
  ​How to resolve this issue -

  
  You can add a proxy to your web application. A proxy will forward requests from your web application to the API endpoint, allowing you to bypass the CORS restrictions. Here's an example of how to set up a proxy using the HTTP-proxy-middleware package:

  
  

  1) Install the "HTTP-proxy-middleware package"

  npm install http-proxy-middleware --save

  
  

  2) In your web application code, create a new file called setupProxy.js in the src directory. This file will contain the configuration for the proxy.

  const { createProxyMiddleware } = require('http-proxy-middleware');

  
  

  module.exports = function(app) {

    app.use(

      '/api',

      createProxyMiddleware({

        target: 'http://localhost:3001', // Replace with the URL of your API endpoint

        changeOrigin: true,

      })

    );

  };

  
  

  3) In your "package.json" file, add a new "proxy" field that points to the URL of your web application. This will tell the browser to use the proxy for all requests that match the specified path.

  "proxy": "http://localhost:3000"

  
  

  With these steps, any requests to API in your web application will be forwarded to "your proxy path" (replaced with the URL of your API endpoint), allowing you to bypass the CORS restrictions.

  
  

Also, you can refer to these links for more:
​ 
http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain

http://stackoverflow.com/questions/16989505/jquery-cross-domain-ajax

​