CODEWITHSUNDEEP
javascriptnode.jsreactjscorshttp-proxy-middleware
A.G.Progm.Enthusiast
A.G.Progm.Enthusiast

Reputation: 1010

How to bypass CORS policy when sending get/post request from React JS?

From my React JS app , I need to fetch data from servers in other domains. However, I am prevented by CORS policy and not able to fetch the data.

Let us assume that my React app is running on localhost:3000 during the development. I want to make get/post call to another server running on http://myserver.com The URL through which I want to fetch the data is http://ext-server.com/data/records?name=xyz

I have installed http-proxy-middleware thru npm and using it in my react app. Created a setupProxy.js file under src folder with below content :

const { createProxyMiddleware} = require("http-proxy-middleware")
module.exports = app => {
   app.use(
      createProxyMiddleware('/data/records' , {
        target:'http://ext-server.com',
        changeOrigin: true
     })
 )
}

On the landing page of my react app (firstpage.js) when http://localhost:3000 is hit , I have added below piece of code to the button event that makes the get call to the http://ext-server.com

getTheData() {
  
let url = "http://ext-server.com/data/records?name=" + encodeURIComponent(this.state.name); 

axios.get(url,
  { 
    headers: {
     "Content-Type":"application/json;charset=UTL-8",
     "Access-Control-Allow-Origin": "*",
     Accept: "application/json",
      }, 
      baseURL: 'http://ext-server.com'
   }
 ).then((response) => {
     console.log(response["access_token"]);
  }).catch(error) => {
       console.log("Error: ", error)
  }).then(function () {
       console.log("always call it")
});

}

In the package.json , I have added :

"proxy": "http://ext-server.com",
"homepage":"http://localhost:3000",

But I am still getting below error: Access to XMLHttpRequest at 'http://ext-server.com/data/records?name= ' from origin 'http://localhost:3000' has been blocked by CORS policy.

Is there anything that I am missing here ? what is the correct way to use this http-proxy-middleware? Any help will be very useful! Thanks

Upvotes: 2

Views: 9455

Answers (3)

reynaldi
reynaldi

Reputation: 113

If there’s no backend/server at all and you’re only deploying a static frontend app, then http-proxy-middleware won’t work since it needs a running Node server to intercept and forward requests. In that case, your main options are:

Ask the external server to enable CORS

Request that the API you’re calling includes a response header like:

Access-Control-Allow-Origin: *

or specifically allows your website (origin). If they can do this, then it’s the cleanest fix.

Use a CORS proxy

If you have no control over the server, your only workaround (with no backend of your own) is to route the request through a CORS proxy. Either self-hosted (cors-anywhere) or hosted CORS proxy (Corsfix). The proxy adds the necessary CORS headers, letting your browser fetch the data without errors.

With CORS proxy, you typically add the proxy URL before your target URL

fetch("https://proxy.corsfix.com/?http://ext-server.com/data/records?name=abc");

(I am affiliated with Corsfix)

Upvotes: 2

Torsten Barthel
Torsten Barthel

Reputation: 3466

The CORS policy is one and only administered by the web server and its settings. To allow CORS requests it has to be implemented on server side. No chance to do it from your client application.

Basically its just a header setting (below example for NodeJS):

res.header("Access-Control-Allow-Origin", "*")

Sending that header will allow requests from every domain.

Upvotes: 0

Armandas Astrauskas
Armandas Astrauskas

Reputation: 111

As you can see from MDN the "Access-Control-Allow-Origin": "*" header is a response type header, this means that it should go to in your server response. Also I advise you to not use the * symbol, instead I would rather match it with the origin header in your Request.

Upvotes: 0

Related Questions