Reputation: 21
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
Reputation: 13288
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
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
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