React

React项目运行在本地3000端口, 本地访问: localhost:3000.

TodoList组件里生命周期函数中ajax调用

    componentDidMount(){
        console.log('render之后, 只执行一次, 约定ajax请求放在这里');
        axios.get('http://localhost:3000/todolist')
            .then(()=>{alert('succ')})
            .catch(()=>{alert('error')});

    }

Charls v4.6.1

 桌面创建todolist.json

配置Charls映射本地文件

tools-->Map Local Settings-->勾选Enable Map Local-->Add

Map From: 配置协议, 地址, 端口号, 项目路径

Map To: 配置本地文件路径

 结果:请求失败

参考(185条消息) 关于React使用Charles mock前端数据404且localhost.charlesproxy.com失败问题_「已注销」的博客-CSDN博客 可能是Charles升级造成的, 修改Host: localhost.charlesproxy.com

直接在浏览器访问http://localhost.charlesproxy.com:3000/todolist成功

但是在TodoList组件的生命周期函数中调用ajax

 Access to XMLHttpRequest at 'http://localhost.charlesproxy.com:3000/todolist' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

应该是跨域问题.

 不同域名之间不允许访问。

解决方法:

Charles V4.6.1 --> Tools --> Rewrite Setting --> 

 

 

OK-->Add

最终配置页面

  

ajax请求

    componentDidMount(){
        console.log('render之后, 只执行一次, 约定ajax请求放在这里');
        axios.get('http://localhost.charlesproxy.com:3000/todolist')
            .then(()=>{alert('succ')})
            .catch(()=>{alert('error')});

    }

结果一切正常

 

参考:(185条消息) charles解决跨域问题_bingleihenshang的博客-CSDN博客_charles跨域