报错解决 vue使用axios请求发生301 Moved Permanently错误

本文讲述了在使用Element UI上传组件时遇到的两次请求问题,先是301重定向,后是500错误。通过排查发现是URL路径配置问题,加上缺失的斜杠导致。最终解决方案是确保接口URL带上正确的路径,避免了后续的错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用element-ui 上传组件 点击上传 接口调用了两次 一次报错 301 一次报错500
报错:
在这里插入图片描述
301:
在这里插入图片描述
500: 500的这个就很奇怪了 我配置的是post请求 这边却显示 GET 而且url后面自动给加了一个 /
在这里插入图片描述
起初 以为是 element 上传组件的问题 自动上传也禁止了 各种配置都配置了 还是有这个问题
最后发现点击上传按钮 会先报301 再报500 所以问题还是出在了301 上面

301 重定向: 看到有大佬说是跨域问题 但是跨域这个后端都已经配置了 而且项目中其他接口都是正常请求的 所以这个 跨域 pass掉 接着找问题

请求代码
上传按钮点击事件
在这里插入图片描述
接口配置
在这里插入图片描述
最后 发现 这个Url后面是要加一个 / 的

因为其他接口都没有加 所以这个 接口我也没有加
仔细看了一下之前老项目中这个接口 是需要加上 /

正确配置 如下:
在这里插入图片描述
请求成功
在这里插入图片描述
这样就可以了

附加:
301:被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。

302:请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。

response返回的是res :>> {"header": {"Access-Control-Allow-Headers": "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,key,x-biz,x-info,platinfo,encr,enginever,gzipped,poiid", "Access-Control-Allow-Methods": "*", "Access-Control-Allow-Origin": "*", "Connection": "close", "Content-Encoding": "gzip", "Content-Type": "application/json", "Date": "Wed, 12 Mar 2025 06:20:18 GMT", "Server": "Tengine", "Transfer-Encoding": "chunked", "Vary": "Accept-Encoding", "gsid": "033017013222174176041837700030450875888", "protocol": "http/1.1", "sc": "0.004"}, "data": {"info": "USERKEY_PLAT_NOMATCH", "infocode": "10009", "status": "0", "sec_code_debug": "d41d8cd98f00b204e9800998ecf8427e", "key": "b96e4ccbfc8a4cc4ec27dc27b0ce2060", "sec_code": "d41d8cd98f00b204e9800998ecf8427e"}, "statusCode": 200, "profile": {"redirectStart": 0, "redirectEnd": 0, "fetchStart": 1741760418186, "domainLookUpStart": 1741760418189, "domainLookUpEnd": 1741760418189, "connectStart": 1741760418189, "connectEnd": 1741760418265, "SSLconnectionStart": 1741760418202, "SSLconnectionEnd": 1741760418265, "requestStart": 1741760418186, "requestEnd": 1741760418291, "responseStart": 1741760418290, "responseEnd": 1741760418291, "rtt": 24, "estimate_nettype": 5, "httpRttEstimate": 24, "transportRttEstimate": 11, "downstreamThroughputKbpsEstimate": 1600, "throughputKbps": 0, "peerIP": "203.209.230.17", "port": 443, "socketReused": false, "sendBytesCount": 678, "receivedBytedCount": 679, "protocol": "http/1.1", "usingHighPerformanceMode": true}, "cookies": [], "accelerateType": "none", "errMsg": "request:ok"}
03-13
<think>好的,我现在需要分析用户的问题,关于HTTP响应头及状态码的含义,特别是Access-Control-Allow-Headers、Content-Type、status code、info和infocode这些字段。用户还提到了几个引用来源,都是关于跨域请求的问题,比如前端使用Vueaxios时遇到的CORS错误。首先,我应该先理解每个字段的基本定义和作用,然后结合用户的引用案例进行解释。 首先,HTTP状态码(status code)是服务器响应的第一部分,三位数字,表示请求的处理结果。比如200是成功,404是未找到,500是服务器内部错误等。这部分需要详细分类说明,比如1xx信息响应,2xx成功,3xx重定向,4xx客户端错误,5xx服务器错误。 接下来是响应头中的字段。Access-Control-Allow-Headers是CORS(跨域资源共享)相关的头,它指定了允许的请求头字段。用户的引用中提到,当Content-Type不在这个头的允许列表中时,浏览器会阻止请求,导致报错。因此需要解释这个头的作用,以及如何正确配置它来解决跨域问题。 然后是Content-Type,这个头指示响应体的媒体类型,比如application/json或text/html。同时,在请求中,Content-Type告诉服务器发送的数据格式。如果前端发送的请求头中的Content-Type不被服务器允许,就会触发CORS预检请求失败,如引用中的例子所示。 用户还提到了info和infocode,这两个字段可能不是标准HTTP头,而是某些API自定义的返回字段,通常用于传递业务层面的状态信息,比如操作成功或失败的具体原因。需要指出这些字段的特定性,可能因不同服务而异。 接下来,需要按照用户的要求,解析每个字段的具体意义,并引用提供的参考内容来支持解释。例如,当Access-Control-Allow-Headers没有包含Content-Type时,前端请求会被拒绝,如引用[2]和[3]中的情况。这时需要后端配置该头,允许相应的字段。 同时,要确保回答的结构清晰,分点解释每个字段,并给出示例或应用场景。例如,在解释Access-Control-Allow-Headers时,可以说明如何在后端设置,比如在Node.js使用Express框架设置响应头。 最后,生成的相关问题需要与HTTP响应头、CORS、状态码以及自定义字段相关,帮助用户进一步理解可能遇到的类似问题。 在组织内容时,要注意使用中文,数学表达式用$...$格式,独立公式用$$...$$,但在这个问题中可能数学公式较少,但需要确保LaTeX的正确性。同时,引用标记要自然地放在引用段落的末尾,如[^2]。 现在需要将这些思考整理成一个结构化的回答,确保每个部分都涵盖用户的需求,并正确引用提供的参考资料。</think>### HTTP响应头及状态码解析 #### 1. **HTTP状态码(Status Code)** HTTP状态码是服务器对请求处理结果的标准化响应,由三位数字组成,分为五类: - **1xx(信息响应)**:表示请求已被接收,继续处理。例如,`100 Continue`表示客户端应继续发送请求体[^1]。 - **2xx(成功)**:请求成功处理。例如,`200 OK`表示请求成功[^1]。 - **3xx(重定向)**:需进一步操作以完成请求。例如,`301 Moved Permanently`表示资源已永久迁移[^1]。 - **4xx(客户端错误)**:请求包含错误或无法完成。例如,`404 Not Found`表示资源未找到[^2]。 - **5xx(服务器错误)**:服务器处理请求失败。例如,`500 Internal Server Error`表示服务器内部错误。 #### 2. **Access-Control-Allow-Headers** 此响应头用于**跨域资源共享(CORS)**,指定允许客户端在请求中携带的额外头字段。 - **示例**:若后端返回`Access-Control-Allow-Headers: Content-Type`,则允许客户端发送包含`Content-Type`头的请求[^3]。 - **常见问题**:若前端请求头包含未声明的字段(如`Content-Type`未被允许),浏览器会拦截请求报错。 #### 3. **Content-Type** 此头字段用于**声明请求或响应体的媒体类型**: - **请求中**:如`Content-Type: application/json`表示客户端发送JSON格式数据。 - **响应中**:如`Content-Type: text/html`表示服务器返回HTML内容。 #### 4. **自定义字段:info与infocode** 这些字段通常为**业务层自定义的返回信息**,非HTTP标准: - **info**:描述操作结果,如`info: "成功"`。 - **infocode**:业务状态码,如`infocode: 10000`表示成功,`20001`表示参数错误。 --- ### 示例分析 假设后端接口返回以下响应: ```http HTTP/1.1 200 OK Access-Control-Allow-Headers: Content-Type Content-Type: application/json { "info": "查询成功", "infocode": 10000 } ``` - **状态码**:`200`表示请求成功。 - **Access-Control-Allow-Headers**:允许客户端在跨域请求使用`Content-Type`头[^3]。 - **Content-Type**:响应体为JSON格式。 - **自定义字段**:`info`和`infocode`提供业务层状态信息。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值