在我们请求后端数据的时候,往往会出现跨域的问题,这时候就需要我们解决一下跨域问题了。
比如下面我需要请求一下这个后端数据:http://47.96.0.211:9000/db/in_theaters。
父组件
import React, { Component } from 'react';
import Proxy from "./components/proxy"
class App extends Component{
render(){
return(
<div>
<Proxy></Proxy>
</div>
)
}
}
export default App;
子组件
import React, { Component } from 'react'
import axios from "axios"
export default class index extends Component {
componentDidMount(){
axios.get("http://47.96.0.211:9000/db/in_theaters").then(res=>{
console.log(res)
})
}
render() {
return (
<div>
proxy
</div>
)
}
}
很明显,如果这样直接请求的话,我们注定是失败的。在这里我们可以通过代理做一下跨域请求。
代理可以分为两种:正向代理和反向代理,这里就不细谈了。
那我们如何解决这个跨域问题呢?我们有两种方法解决。
1. 通过更改node-modules/react-scripts/webpack-dev-server.js文件的proxy选项解决
proxy: {
"/api": {
target: "http://47.96.0.211:9000",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
},
子组件
componentDidMount(){
axios.get("/api/db/in_theaters").then(res=>{
console.log(res)
})
}
这样就可以正常访问了。但是直接更改node-modules/react-scripts/webpack-dev-server.js文件的proxy选项会有一个小问题。
后续如果继续安装其他模块的话,yarn内部就会进行检测看看有没有文件被改动过,重新变成原来的样子。
那我们怎么解决这个小问题呢?我们可以通过安装 eject 弹射模块来解决。
如果弹射失败,你可以
- 把.git文件夹删掉
- 删除node_modules文件,重新执行yarn 或 npm i
如果成功了, 后续只需要对于config/webpackDevServer.js文件的proxy选项进行更改即可。
如果你不想弹射的话,可以尝试第二种方法。
2. 使用 http-proxy-middleware 模块解决跨域问题
安装完毕后,我们需要在src/根目录下面 setupProxy.js文件(注意:一定得是 setupProxy.js 文件夹,名字不可更改)。
然后在这个文件里面配置我们的组件即可。
const {createProxyMiddleware} = require("http-proxy-middleware");
module.exports = function(app){
app.use(
createProxyMiddleware("/api",{
target:"http://47.96.0.211:9000",
changeOrigin:true,
pathRewrite:{
"^/api":""
}
})
)
}
这样,我们的接口就请求出来了。