React 学习笔记：网络请求（三）

   1. fetch请求
        1.Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
        2.语法：
            fetch(url,{
                method:'get',
                headers:{
                    "content-type":"application/x-www-form-urlencoded"
                },
                body:"uname=key&upwd=123",
                credentials:"include, same-origin, omit", //是否允许携带cookie
                mode: 'no-cors, cors, same-origin' // 是否允许cors跨域
            })
            .then(function(data){
                return data.json()  // 解析数据
            })
            .then(function(res){
                console.log(res)    //请求到的结果
            })
    2. 如果是post请求，传递数据格式是："key=value&key=value"
        {
            user_id:"iwen@qq.com",
            password:"iwen123"
        }
        => "user_id=iwen@qq.com&password=iwen123&verification_code=crfvw"
        nodejs中已经封装好一个组件，querystring
            querstring.parse("user_id=iwen@qq.com&password=iwen123") 
                =>{user_id:"iwen@qq.com",password:"iwen123"}

            querystring.stringify({
                user_id:"iwen@qq.com",
                password:"iwen123"
            })
                =>"user_id=iwen@qq.com&password=iwen123"

    3. 跨域
        解决方法：
            1.cors  :后台配置
            2.jsonp :
                下插件：fetch-jsonp
                使用插件
            3. 代理
            参考地址：https://github.com/facebook/create-react-app/blob/45bc6280d109b7e353ffaa497a0352c9d040c36d/docusaurus/docs/proxying-api-requests-in-development.md

                create-react-app 这个一键搭建环境命令生成的代码也可以实现代理
                fecth('http://localhost:3001/user')
                1.在package.json文件中配置
                    1.配置
                    {
                        "proxy": "http://localhost:3001"
                    }
                    2.重启服务器
                    3.修改fetch请求中的路径
                        fetch('/user')
                        .then(data=>data.json())
                        .then(res=>{
                            console.log(res)
                        })
                
                2.使用中间件
                    1.下载：npm install http-proxy-middleware --save
                    2.在src目录下创建setupProxy.js文件
                    3.在setupProxy.js文件中配置
                        const proxy = require('http-proxy-middleware');

                        module.exports = function(app) {
                            app.use(proxy('/*', { target: 'http://localhost:3001/' }));
                        };
                    4.重启服务器