react脚手架配置
reactAjax
- React本身只关注于界面,并不包含发送ajax请求的代码
- 前端应用需要通过ajax请求与后台进行交互(json数据)
- react应用中需要集成第三方ajax(或自己封装)
常用的ajax请求库
- jquery:比较重不建议
- axios:轻量级,建议使用
下载Axios
yarn add axios
import axios from "axios";
const App = () => {
const getDepts = () => {
axios.get('http://localhost:8080/api/dept/getDepts').then(
response=>{
console.log('成功了',response.data)
},
error=>{
console.log('失败了',error)
}
)
}
return (
<div>
<button onClick={()=>getDepts()}>点击获取数据</button>
</div>
)
}
export default App;
上述代码中由于ajax同源策略(同一域,同一端口限制),前端是3000端口,后端是8080端口发生了跨域问题。
- 同一域不同端口号:前端可以发送请求但是无法接收数据
- 不同域不同端口:请求都无法发送
由于发生了跨域问题,此时在前端必须配置代理来解决跨域问题
配置代理
- 第一种配置方式
此时请求代码为:
const getDepts = () => {
axios.get('http://localhost:3000/api/dept/getDepts').then(
response=>{
console.log('成功了',response.data)
},
error=>{
console.log('失败了',error)
}
)
}
前端代码先从3000去找,找不到的话代理服务器再从8080去找
第二种配置代理的方式
在src文件下新建setupProxy.js文件
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
createProxyMiddleware('/api', {
target: 'http://localhost:8080/',
changeOrigin: true,
pathRewrite: {'^/api': ''}
}),
createProxyMiddleware('/api1', {
target: 'http:localhost: 8081',
changeOrigin: true,
pathRewrite: {'^/api1': ''}
})
)
}
- 请求代码
const getDepts = () => {
axios.get('/api/dept/getDepts').then(
response=>{
console.log('成功了',response.data)
},
error=>{
console.log('失败了',error)
}
)
}
target: 请求转发给谁
changeOrigin:控制服务端收到的请求头的host字段的值,如果是true则服务端收到的host为服务端host,false的话服务端收到的地址为代理服务器地址
pathRewrite:重写请求路径,将/api1替换成‘’
github搜索案例
码云地址:https://gitee.com/www_zzq_com/react_ts_study