React interface requests cross-domain proxy configuration (single proxy and multiple proxy configurations)
The essence of cross-domain is the limitation of the same-origin policy, that is, the ajax engine intercepts your response. The same-origin policy is a security mechanism of the browser. It requires the same protocol, domain name, and port to send data to each other; For example, if localhost3000 sends a request to localhost5000, it will definitely cause a cross-domain problem. The ajax engine intercepts the response and is not allowed. The data can be sent to the server, but the data cannot be returned.
The simple schematic diagram of configuring the proxy is as follows: configuring the proxy is similar to an intermediate micro-server and there is no ajax engine, so there will be no cross-domain. Its port is the same as the client, and it can send and receive to the server 5000. Response, you can also send and receive responses to the client to solve cross-domain problems.
1. Single agent configuration (just understand it, this will basically not happen in actual development)
Project startup address: http://192.168.11.133:3000 Port 3000
I have prepared 2 test interfaces locally as follows: /user user information and /des subway station information: the ports are both 8080
http://192.168.11.133: 8080/api/user
http://192.168.11.133:8080/api/des
(1) Add proxy to the package.json file as follows:
"proxy":"http://192.168.11.133:8080"
(2) Here I write a test button directly in App.jsx to make an interface request to obtain data:
import React, {
Component } from 'react'
import axios from 'axios'
export default class App extends Component {
//获取用户数据
getUserInfo = ()=>{
//或者axios.get('http://192.168.11.133:3000/api/user')
axios.get('/api/user').then(res=>{
console.log(res,'返回的数据')
},err=>{
console.log(err,'请求失败')
})
}
render() {
return (
<div>
<button onClick={
this.getUserInfo}>获取用户数据</button>
</div>
)
}
}
Effect: The interface request is successful
2. Multiple proxy configurations (used in actual development)
When the multiple interfaces we request are configured by multiple When a server is provided, multiple cross-domain proxies can be configured
(1), create a new setupProxy.js file under src
Remember: setupProxy.js must be called The name! ! ! Otherwise react cannot find the file
The configuration code is as follows:
//http-proxy-middleware低版本配置
// const proxy = require('http-proxy-middleware');
//http-proxy-middleware高版本配置
const {
createProxyMiddleware: proxy} = require('http-proxy-middleware');
module.exports = function(app){
app.use(
proxy('/api1',{
target:'http://192.168.11.133:8080',
changeOrigin:true,
pathRewrite:{
'^/api1':''}
}),
proxy('/api2',{
target:'http://192.168.11.133:8081',
changeOrigin:true,
pathRewrite:{
'^/api2':''}
})
)
}
(2) Add a prefix when requesting the interface, as shown above for api1 and api2:
The code is as follows:
import React, {
Component } from 'react'
import axios from 'axios'
export default class App extends Component {
//获取用户数据
getUserInfo = ()=>{
axios.get('/api1/api/user').then(res=>{
console.log(res,'返回的数据')
},err=>{
console.log(err,'请求失败')
})
}
render() {
return (
<div>
<button onClick={
this.getUserInfo}>获取用户数据</button>
</div>
)
}
}
Effect:
Brothers are cute. Try it now! !