axios的请求无效！未找到消息始终显示

问题描述

 import React from 'react';
 import {Component} from 'react';
 import {Fragment} from 'react';
 import TodoItem from './TodoItem';

 import axios from 'axios';

 class TodoList extends Component{
        constructor(){
        super();
        this.state={
            inputValue:'hello there',list:[]
        };
        this.inputValueChange=this.inputValueChange.bind(this);  
        this.addList=this.addList.bind(this); 
        this.delList=this.delList.bind(this);
    }
  
    render(){
        return(
        <Fragment>
            <input 
                value={this.state.inputValue}
                onChange={this.inputValueChange} 
                ref={(input)=>{this.input=input}}      
            />
            <button onClick={this.addList}>按鈕</button>
            <ul>
                {this.getTodoItem()}               
            </ul>
        </Fragment>
        );
    }
    componentDidMount(){
        axios.get('/test/todolist')
        .then(()=>{alert('successful')})
        .catch(()=>{alert('error')});
    }

我不知道Axios请求出了什么问题。

刷新页面后，我总是得到'xhr.js：184 GET http：// localhost：3000 / test / todolist 404（不是从开发工具的控制台中找到）消息。

我知道此消息表示找不到此文件。

我发现Charles代理工具没有显示localhost的URL。

所以我认为也许Charles代理的设置出现了一些问题。

我完成的设置Charles代理工具的过程：

（1）选中“代理”->“ Windows代理”

（2）帮助-> SSL代理->安装Charles Root证书

（3）代理-> SSL代理设置->选中“启用SSL代理”->添加位置-> 将“主机”设置为*，将“发布”设置为443

（4）扩展SwitchySharp->设置名称为Charles->设置手动配置http代理为 10.0.0.143（查尔斯代理工具帮助->本地IP地址），端口为8888（查尔斯代理端口）-> 保存

（5）在浏览器导航栏中检查查尔斯

（6）工具->本地地图->选中启用本地地图->将位置添加为 http：// localhost / test / todolist，本地路径为C：\ Users \ user \ Desktop \ todolist.json

顺便说一句，我的计算机使用的是Windows系统，并且我使用Microsoft Edge作为开发环境，而Charles代理版本是4.5.6

我尝试后，问题仍然存在。

我希望有人指出确切的问题并提出一些有用的解决方案。

非常感谢^^

解决方法

默认情况下，Axios的所有流量都不通过代理。因此，您的“地图本地目录”无效，并且显示404未找到。

要解决此问题，您可以明确告诉Axios在特定主机和端口上使用Proxy（请使用Charles Proxy的真实值替换主机和端口）

axios.get({
  url: '/test/todolist',// 'proxy' defines the hostname and port of the proxy server
  // Use `false` to disable proxies,ignoring environment variables.
  // `auth` indicates that HTTP Basic auth should be used to connect to the proxy,and
  // supplies credentials.
  // This will set an `Proxy-Authorization` header,overwriting any existing
  // `Proxy-Authorization` custom headers you have set using `headers`.
  proxy: {
    host: '127.0.0.1',port: 9090
  }
});

使用cURL，fetch，ktor等也会发生此问题。Read more

axios charles-proxy reactjs reactjs