api.aaa.com/home/sum/repair_order:1 Failed to load resource: the server responded with a status of~

项目场景:

相关背景:

一大早访问系统页面时,加载缓慢,控制台出现以下红色信息
api.aaa.com/home/sum/repair_order:1 Failed to load resource: the server responded with a status of 504


问题描述

问题:

一大早访问系统页面时,加载缓慢,页面出现如下图所示情况,
在这里插入图片描述

Access to XMLHttpRequest at 'http://api.aaa.com/home/sum/repair_order' from origin 'http://aaa.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
api.aaa.com/home/sum/repair_order:1      
   
    Failed to load resource: net::ERR_FAILED
/#/device-list:1 Access to XMLHttpRequest at 'http://api.aaa.com/device/list' from origin 'http://aaa.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
api.aaa.com/device/list:1 
         Failed to load resource: net::ERR_FAILED

在这里插入图片描述


原因分析:

提示:这里填写问题的分析:

504 Gateway Timeout 错误通常意味着服务器在充当网关或代理时,未能及时从上游服务器获得响应。这种问题可能由多种原因造成,以下是一些可能的原因及解决方法:

  1. 上游服务器问题

    • 上游服务器可能宕机或无法处理请求,导致请求超时。
  2. 网络延迟

    • 网络延迟可能导致请求无法在规定时间内完成,尤其是如果请求涉及跨地域的服务器。
  3. 负载过高

    • 如果上游服务器负载过高或处理请求的时间过长,也可能导致超时。
  4. 配置错误

    • 服务器或代理的配置错误可能导致请求超时。例如,负载均衡器或反向代理的超时设置可能过低。
  5. DNS 问题

    • DNS 解析问题可能导致请求无法正确路由到上游服务器。
  6. 防火墙或安全设置

    • 防火墙或安全设置可能拦截或阻止请求,导致超时。

解决方案:

解决方法:

  1. 检查上游服务器状态

    • 确保上游服务器正在运行并且能够处理请求。如果你有权限访问上游服务器的日志,可以查看是否有错误信息。
  2. 检查网络连接

    • 确保网络连接稳定,特别是涉及到的上游服务器的网络状态。我们可以使用网络诊断工具(如 pingtraceroute)来排查网络问题。
  3. 优化服务器性能

    • 如果上游服务器负载过高,可以考虑优化服务器性能,增加服务器资源,或进行负载均衡。
  4. 调整超时设置

    • 查看负载均衡器或反向代理(如 Nginx、Apache、HAProxy)的超时配置,并考虑适当增加超时时间。
  5. 检查防火墙和安全设置

    • 确保防火墙或安全设置没有阻止请求。可以查看相关配置并做必要的调整。
  6. 检查DNS设置

    • 确保DNS设置正确,并且DNS服务器能够正常解析上游服务器的地址。

解决504错误通常需要综合检查从客户端到上游服务器的整个请求链路,包括网络连接、服务器负载和配置设置。


最终分析:

根据图中所示报错信息中可知,
报错问题大概率是由于浏览器的同源策略导致的,通常发生在一个源(如域名、协议或端口)的网页尝试请求另一个源的资源时。

解决方法:

CORS(跨源资源共享):服务器需要在响应头中添加合适的CORS头部,允许特定的源访问资源。

例如,服务器响应头应包含:Access-Control-Allow-Origin: http://yourdomain.com(允许特定源访问)

或者使用通配符 Access-Control-Allow-Origin: *(允许所有源访问,但存在安全风险)

JSONP(只支持GET请求):通过在URL中添加一个callback参数,服务器返回一个包裹在callback函数中的JSON响应。

代理服务:在自己的服务器上创建一个代理,所有前端请求都先发送到这个代理,由代理服务器转发到目标URL,并返回结果。

使用后端语言(如Node.js、Python等)创建一个代理API,前端直接请求这个代理API,代理再请求目标URL并返回数据。

配置浏览器插件(不推荐,可能引起隐私和安全问题)。

如果是自己控制服务器,可以在服务器上设置反向代理,使得请求看起来像是同源的。

选择哪种方法取决于我们实际项目中的具体需求和服务器配置。
通常,CORS是最推荐的方法,因为它允许更灵活的访问控制,并且不需要前端做特殊处理。

  • 19
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值