proxy config in react

Question

I need to get JSON response from fetch request to the server. I set a proxy and I'm getting 403 forbidden response when using proxy secure: false.But I can access the db from the browser url.

What can be the reason for that?

Also I want to add "bypass" to react proxy config in package.JSON. How can I do it?

  "bypass": function (req, res, proxyOptions) {
            req.headers['Access-Control-Allow-Origin'] = "*";
            req.headers['Access-Control-Allow-Methods'] = 'GET,PUT,POST,DELETE';
            req.headers['Access-Control-Allow-Headers'] = 'Content-Type';
        }

Thanks!

It's not clear to me what do you want to achieve? You want to add this headers on what requests? Ajax? Requests to any resource (images, etc)? — Murilo Cruz
– Murilo Cruz, Commented Jun 8, 2018 at 19:19
I set a proxy to fetch request to a server. When using proxy "secure": false I get forbidden 403 response. But I can access the db url from the browser. I thought adding the headers will help — Dusty
– Dusty, Commented Jun 8, 2018 at 19:42

Dusty · Accepted Answer · 2018-12-23 11:39:55Z

Ok so I solved the problem. I used create-react-app webpack files( webpack.config.dev and webpackDevServer)for setting the proxy:

devServer: {
        proxy: {
            '/api': {
                target: '*****',
                secure: false,
                changeOrigin: true,
                logLevel: "debug",
                bypass: function (req, res, proxyOptions) {
                    res.header('Access-Control-Allow-Origin', '*');
                    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
                    res.header('Access-Control-Allow-Headers', 'Content-Type');
                }
            }
        }
    },

Then I added credentials: 'include' in the fetch request, because the browser didn't send the cookie with the request. Hope this will help somebody.

Also, if you are using http and localhost, the browser won't catch any cookies sent by the server. You have to use https and change your domain to have two dots inside Ex: dev.xxx.com

Yilmaz · Accepted Answer · 2019-09-08 05:51:17Z

0

or you could

npm i http-proxy-middleware --save

and in your create-react-app inside src create setupProxy.js file

const proxy=require("http-proxy-middleware")

module.exports=function(app){
    app.use(proxy('/api',{target:"http://localhost:5000"})) /your port 
}

that package will automatically look inside this file, so you do not need to import in anywhere

answered Sep 8, 2019 at 5:51

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Comments

Anitha · Accepted Answer · 2021-08-31 13:18:20Z

I tried this in my application. Am seeing proxy is been created. But it showing 304 unmodified exception .

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api/PolicyInfo', {
      target: 'http://localhost:5000/api/PolicyInfo', // API endpoint 1
      changeOrigin: true,
      pathRewrite: {
        "^/api/PolicyInfo": "",
      },
      headers: {
        Connection: "keep-alive"
      }
    })
  );
}

And in my application i Call this way

const req =  fetch(baseURL+ "/" + (Id));
return (dispatch) => { 
        req
       .then(response => {
                return response.json();
        }
            )
            .   then((items) =>
            {
                 dispatch(...)
            }
             )
    }

Collectives™ on Stack Overflow

proxy config in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related