CODEWITHSUNDEEP
javascriptreactjs
Eric George
Eric George

Reputation: 21

Proxying in development using Create React App

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?

Upvotes: 2

Views: 2266

Answers (3)

Vivek
Vivek

Reputation: 13298

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

Upvotes: 0

Yilmaz
Yilmaz

Reputation: 49681

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.

Upvotes: 0

Johnny Zabala
Johnny Zabala

Reputation: 2483

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.

Upvotes: 1

Related Questions