0416 react框架65-66 ajax 跨域 配置代理

1. react里ajax
   1-1.React本身只关注于界面, 并不包含发送ajax请求的代码
   1-2.前端应用需要通过ajax请求与后台进行交互(json数据)
   1-3.react应用中需要集成第三方ajax库(或自己封装)
2. 常用的ajax请求库
   2-1.jQuery: 比较重, 如果需要另外引入不建议使用
   2-2.axios: 轻量级, 建议使用
   1)封装XmlHttpRequest对象的ajax

2. promise风格
   3)可以用在浏览器端和node服务器端

总结：1. Fehelper
2 .node server1.js 代理服务器启动命令
3.解决跨域：client 3000------>代理中间人3000<—(没有ajax引擎就可以发)------->server 5000---->client 3000
3-1 配置一个代理在package.json里加上 "proxy":"http://localhost:5000"，

getStudentData = ()=>{
	axios.get('http://localhost:3002/students').then(  //写自己的端口号，收到的数据是自己publicl里面没有的
		response => {console.log('成功了',response.data);},
		error => {console.log('失败了',error);}
	)
}

说明：

1.优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
3-2 配置多个代理
3-2-1. 第一步：创建代理配置文件
3-2-2. 在src下创建配置文件：src/setupProxy.js
3-3-3. 编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')
module.exports = function(app){
	app.use(
		proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置
			target:'http://localhost:5000', //请求转发给谁
			changeOrigin:true,//控制服务器收到的请求头中Host的值
			  	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
			pathRewrite:{'^/api1':''} //重写请求路径(必须)
		}),
		proxy('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}

说明
1.优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。
4. host表示从哪发出的
5. 关闭服务器^c