I wonder why the react application doesn't make request to back end service when client accesses to root page when using proxy
option in package.json
file.
Here is my code. Front end service is react project. Back end service is spring boot project.
spring boot controller
package blog.in.action.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class CorsController {
@GetMapping(value = {"", "/"})
public String index() {
System.out.println("index");
return "index";
}
@GetMapping(value = "/not-cors")
public String notCors() {
System.out.println("not-cors");
return "notCors";
}
@CrossOrigin("http://localhost:3000")
@GetMapping(value = "/cors")
public String cors() {
System.out.println("cors");
return "cors";
}
@GetMapping(value = "/not-proxy")
public String notProxy() {
System.out.println("not-proxy");
return "notProxy";
}
@GetMapping(value = "/proxy")
public String proxy() {
System.out.println("proxy");
return "proxy";
}
}
react App.js
import './App.css';
import {useState} from "react";
import axios from "axios";
function App() {
const [message, setMessage] = useState('');
const responseHandler = ({data}) => {
setMessage(data);
return data;
};
const errorHandler = ({message}) => {
setMessage(message);
return message;
};
const onNonCorsHeaderHandler = () => {
axios.get('http://localhost:8080/not-cors')
.then(responseHandler)
.catch(errorHandler);
};
const onCorsHeaderHandler = () => {
axios.get('http://localhost:8080/cors').then(responseHandler);
};
const onNonProxyHandler = () => {
axios.get('/not-proxy')
.then(responseHandler)
.catch(errorHandler);
};
const onProxyHandler = () => {
axios.get('/proxy').then(responseHandler);
};
return (
<div className="App">
<p>
{message}
</p>
<div>
<button onClick={onNonCorsHeaderHandler}>non cors header</button>
<button onClick={onCorsHeaderHandler}>cors header</button>
<button onClick={onNonProxyHandler}>nonProxy</button>
<button onClick={onProxyHandler}>proxy</button>
</div>
</div>
);
}
export default App;
Using proxy
option in package.json
file
When I create a proxy in react application by using package.json file.
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"http-proxy-middleware": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8080"
}
React Application root path
Using http-proxy-middleware
module
When I create a proxy in react application by using setupProxy.js
file for http-proxy-middleware
module.
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = app => {
app.use('/',
createProxyMiddleware(
{
target: 'http://localhost:8080',
changeOrigin: true,
}
)
)
}