reactjs 在react js中调用axios get请求时发生网络错误

2ekbmq32 于 2023-06-22 发布在 React

关注(0)|答案(6)|浏览(173)

我在macOS中使用React.js，当我尝试调用axios.get时，我收到网络错误。我读过很多像我这样使用React Native的案例，他们的答案是添加设置，允许他们在mac中使用http而不是https，但该设置不能在react js中使用。
任何建议将不胜感激。

Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)

我的代码是这样的：

try {
  const Response = await axios.get(http://xxxxx/WebServiceTest/service.svc?wsdl/GetItems, {
   
    params: {
      Number: "100",
      Id: "101",
      userName: "11",
      credential: "Test"
    }
  });
  console.log("http response = " + Response.data);
} catch (ex) {
  console.log("error.status:", ex);
}

reactjs

来源：https://stackoverflow.com/questions/56297420/getting-network-error-when-calling-axios-get-request-in-react-js

6条答案

按热度按时间

ds97pgxw1#

将你的await改为promise，即使你输入await，axios函数也会异步工作。

async functionName() {
  let response = () => {
    return new Promise(function(resolve, reject) {
      fetch('http://xxxxx/WebServiceTest/service.svc?wsdl/GetItems', {
        params: {
          Number: "100",
          Id: "101",
          userName: "11",
          credential: "Test"
        }
      }).then(response => {
        resolve(response);
      });
    });
  };
  let responseData = await response();
  console.log(responseData.data);
}

赞(0）回复(0）举报 2023-06-22

cig3rfwq2#

我已经通过使用@CrossOrigin注解在spring Boot 中找到了解决方案。

@RestController
@CrossOrigin
@RequestMapping("/cus")
public class CusController{

    @Autowired
    CustomerService cus_service=null;

    @PostMapping("/save")
    public Customer saveCustomer(@RequestBody Customer customer)
    {

        if(customer!=null)
            return cus_service.saveCustomer(customer);
        else
            throw new DataNotFoundException("Data Not Available For Customer");

    }
}

赞(0）回复(0）举报 2023-06-22

clj7thdc3#

您可以简单地在

axios.create({baseURL:" "});

使之成为

const instance = axios.create(
{
        baseURL: "",
        withCredentials: false,
        headers: {
          'Access-Control-Allow-Origin' : '*',
          'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',   
      }
  })

在你的情况下，尝试在你必须创建axios示例的地方添加上面的代码。如果你使用的是默认axios，那么考虑按照上面的代码创建自定义示例。

赞(0）回复(0）举报 2023-06-22

htzpubme4#

你可以在reactjs中使用axios方法，在服务器端代码中使用一些命令来摆脱cors策略错误我在php中的服务器端代码中使用了这些命令

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Max-Age: 1728000');
header("Content-Length: 0");
header("Content-Type: text/plain");

记住：立即开始会话添加这些行

赞(0）回复(0）举报 2023-06-22

kt06eoxx5#

1.我们必须允许CORS，将Access-Control-Allow-Origin：* 放在请求的头部可能不起作用。安装一个谷歌扩展，启用CORS请求。
1.请确保您在请求中提供的凭据有效。
1.如果你正在向虚拟宅基地服务器传递请求，请确保该机器已被配置。如果你使用的是vagrant，请尝试vagrant up --provision，这将使localhost连接到宅基地的db。
1.尝试更改标题的内容类型。header：{'Content-Type'：'application/x-www-form-urlencoded; String s =UTF-8; application/json '}这一点非常重要。

赞(0）回复(0）举报 2023-06-22

2vuwiymt6#

如果使用服务器后端本地，那么它可以用模来做cors和incluir no back-end que resolve.
如果您使用本地后端服务器，只需下载cors模块并将其包含在解决该问题的后端中。

赞(0）回复(0）举报 2023-06-22