Proxying in development using Create React App

Question

I'm building a React application that I started with create-react-app. In their documentation, they describe using a proxy server for API calls during development. I want to use this for when I make requests to my MAMP server for php files. However, the requests aren't being proxied to the assigned, it's still the webpack dev server serving it.

The create react app documentation says to put a line into the package.json file to set up the proxy. I've put "proxy": "http://localhost" in it (the MAMP server is running on port 80). The php file I'm trying to serve is in an "api" folder in the same directory as index.html

here's the request:

$.ajax({
     url: "/api/test.php"
     success: response=>{
     console.log(response);
     }
});

and test.php simply says: print("success")

But the console is reading:

<?php
print("success")
?>

which means it's the dev server, not the apache server that's serving the file. How can I fix this?

score 1 · Answer 1 · answered Jun 07 '19 at 02:46

1

From the docs:

The development server will only attempt to send requests without text/html in its Accept header to the proxy.

https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

Can you check the Network tab in the devtools and make sure the request Accept header is different from text/html. In case that is the problem this link could help you.

answered Jun 07 '19 at 02:46

Johnny Zabala

2,285
1
12
14

I checked the network tab after following the advice on that link you provided...I made the accept header in the request all sorts of different things besides text/html, and it still isn't working. The request still gets sent to the dev server, not proxied to the apahce server – Eric George Jun 07 '19 at 11:37
Alright. To debug the problem without the code can be a little difficult so, as a solution I would suggest you to use an env var instead of proxy. You can create something like `REACT_APP_API_URI` and use it in your project. https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables – Johnny Zabala Jun 07 '19 at 11:44
``` $.ajax({ url: `${process.env. REACT_APP_API_URI}/api/test.php` success: response=>{ console.log(response); } }); ``` I know this is not the solution to your problem but at least you'll be able to continue working on you app. – Johnny Zabala Jun 07 '19 at 11:47

score 0 · Answer 2 · answered Dec 25 '19 at 01:47

You are making an ajax request from your localhost to a different domain. this is counted as CORS request. to circumvent this you need to use proxy. since proxy is the part of the create react app, your browser assumes it is always pointed to the create-react-app, browser does not know that proxy is there. to solve the issue follow those steps:

In the client side directory:

npm i http-proxy-middleware --save

Create setupProxy.js file in client/src. No need to import this anywhere. create-react-app will look for this directory

Add your proxies to this file.

const proxy=require("http-proxy-middleware")
module.exports=function(app){
    app.use(proxy(['/api'],{target:"http://localhost:80"}))}

We are saying that make a proxy and if anyone tries to visit the route /api on our react server, automatically forward the request on to localhost:80.

score 0 · Answer 3 · answered Mar 19 '22 at 03:23

To proxy non AJAX calls through react. You will need to install http-proxy-middleware and configure proxy manually.

First install http-proxy-middleware in your react app

npm install http-proxy-middleware --save

Then create src/setupProxy.js file with below configuration

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable no-undef */
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      secure: false,
      changeOrigin: true,
    })
  );
};

Now simply start the application and you will see that non AJAX calls (php etc) are also being proxied correctly.

Note: Remove the proxy configuration from package.json file before configuring it manually with http-proxy-middleware otherwise the proxy won't work correctly if defined at both the places

Proxying in development using Create React App

3 Answers3