写在前面
在最近看了React之后，一直觉得学的懵懵然，虽然很多大佬的手写笔记，写的都很不错，但是我一直没有我想要的那种细无巨细，比如类式组件this指向问题的追根溯源，又比如三大实例属性简写的由来，总之我还是决定做一份事无巨细的笔记。
那就让我们开始吧！
脚手架配置代理_方法1、2
前置说明
1. React本身只关注于界面, 并不包含发送ajax请求的代码
2. 前端应用需要通过ajax请求与后台进行交互(json数据)
3. react应用中需要集成第三方ajax库(或自己封装)
常用的ajax请求库
1. jQuery: 比较重, 如果需要另外引入不建议使用
2. axios: 轻量级, 建议使用
1) 封装XmlHttpRequest对象的ajax 2) promise风格 3) 可以用在浏览器端和node服务器端 复制代码
安装axios
yarn add axios 复制代码
开启服务器
node server1.js 复制代码
浏览器测试地址
-在浏览器地址栏输入地址敲回车 == 发送get请求
FeHelper插件
- 自动整理json文件
解决跨域
- 请求跨域
- 发送了请求，数据无法返回。
- 代理服务器
中间微小服务器没有AJAX引擎。不会拦截返回数据。同源策略不会限制。
- 开启代理服务器
方法1
- 配置文件
- 在package.json中配置
"proxy":"http://localhost:5000" // 只需要写服务器地址端口号 复制代码
这样所以发送给3000的请求都会发送给5000
注意：
①必须重新启动项目 ②get请求将端口号更换为3000 复制代码
getStudentData = ()=>{ axios.get('http://localhost:3000/students').then( response => {console.log('成功了',response.data);}, error => {console.log('失败了',error);} ) } 复制代码
- public文件夹就是中间服务器的根路径，请求的数据如果是根路径有的数据那么就不会转发给端口号是5000的服务器。
getStudentData = ()=>{ axios.get('http://localhost:3000/index').then( response => {console.log('成功了',response.data);}, error => {console.log('失败了',error);} ) } 复制代码
方法2
解决问题：如何配置多个服务器
- 建立setupProxy.js文件
1.不可以使用ES6书写、必须使用CJS书写。
React脚手架会找到这个文件，把这个文件添加到webpack的配置。 复制代码
①引入内置模块
const proxy = require('http-proxy-middleware') // 不用下载这个库，react脚手架初始化已经下载好了 复制代码
② 暴露配置对象（函数）
函数收到一个服务对象，调用服务对象的use方法。将proxy方法作为use方法的参数。
③ proxy的参数
第一个参数：决定要把哪些的前缀传递给对应的服务器端口号。（带有这个前缀的路径就会触发代理，请求会被转发）
第二个参数：是一个对象
- 内部target属性的值就是要转发的端口号，
- changeOrigin属性是控制服务器收到的请求头中Host的值
可以更换请求来自于什么的服务器（返回数据的服务器会认为请求就是自身服务器发送的）
这里是3000请求5000
① 未使用changeOrigin:true
②使用changeOrigin:true
- pathRewrite:{'^/api1':''} 是重写请求路径(必须)
详细分解：
将api1替换为空，因为正常发送请求时路径不会出现api1，但是不添加api1又无法请求转发给5000，添加了api又会导致路径不对。所以得使用该替换。
const proxy = require('http-proxy-middleware') module.exports = function(app){ app.use( proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置 target:'http://localhost:5000', //请求转发给谁 changeOrigin:true,//控制服务器收到的请求头中Host的值 pathRewrite:{'^/api1':''} //重写请求路径(必须) }), proxy('/api2',{ target:'http://localhost:5001', changeOrigin:true, pathRewrite:{'^/api2':''} }), ) } 复制代码
getStudentData = ()=>{ axios.get('http://localhost:3000/api1/students').then( response => {console.log('成功了',response.data);}, error => {console.log('失败了',error);} ) } 复制代码
课程中对react脚手架配置代理总结
方法一
在package.json中追加如下配置
"proxy":"http://localhost:5000" 复制代码
说明：
- 优点：配置简单，前端请求资源时可以不加任何前缀。
- 缺点：不能配置多个代理。
- 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
方法二
- 第一步：创建代理配置文件
在src下创建配置文件：src/setupProxy.js 复制代码
- 编写setupProxy.js配置具体代理规则：
const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址) changeOrigin: true, //控制服务器接收到的请求头中host字段的值 /* changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000 changeOrigin默认值为false，但我们一般将changeOrigin值设为true */ pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置) }), proxy('/api2', { target: 'http://localhost:5001', changeOrigin: true, pathRewrite: {'^/api2': ''} }) ) } 复制代码
说明：
- 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
- 缺点：配置繁琐，前端请求资源时必须加前缀。
