react跨域解决方案和fetch请求知识

1.跨域请求错误为Access-Control-Allow-Origin 提示

2.跨域解决方案为proxy 前端解决，还有cors后端解决，proxy有二种一种是直接在react的package.json文件中直接添加 ，"proxy" ："http://localhost:5000",然后在页面发送后端请求的时候，换上本地地址axios.get（"http://localhost:3000"）

3.第二种就是在src文件夹下面新建一个setupProxy.js文件，里面代码为：

const proxy= require('http-proxy-middleware')

module.exports=function(app){
app.use(proxy(
   '/api1',{
      target:'http://localhost:5000',//跨域请求地址
      changeOrigin:true,
      pathRewrite:{'^/api1':'' } //重写请求路径
}
)
)
}

然后axios.get('http://localhost:3000/api1/students')或者本地地址可以取消不写，简化为

axios.get('/api1/students')

4.解构赋值连续写法const {keyword:{ value}}=this,可以取到value但是取不到keyword的值（ps：会报错）

三元表达式可以连着写 true ？ 1 ： 2 false ？ 3:4 istrue ？5:6

5.前端调试插件，FeHelper(前端助手)，把json文件转化为js格式文件，谷歌插件（开发者工具）

6.发送后台数据如果不接受后台返回的值res，可以return   Promise.resolve(res) 暴露出去res

fetch的用法

 1.请求数据的方法有xhr-》jQuery 和axios还有fetch浏览器自带的请求方法，不需要下载和导入就可以直接使用

2.折叠注释//#region    结束//#endregion

3.fetch返回的为res.json()方法的promise对象

fetch('请求地址').then(res=>{}).then(res=>{})二个点then才能返回数据，然后出错可以用.catch(error){}统一处理失败的回调

fetch 用async和await的处理需要用二次await，然后async和await处理错误的方法用try{成功的函数} catch（error）{失败的回调，error}

const res = await fetch('/api1/search/user?q=${key}')

const data = await res.json()

console.log(data)

async和await处理错误的方法用try{成功的函数} catch（error）{失败的回调，error}