postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求?

马肤

温馨提示:这篇文章已超过471天没有更新,请注意相关的内容是否还可用!

摘要:Postman可以正常请求的接口,前端却无法成功发送请求。原因在于前端在添加Content-type头部信息时,后端无法正确接收到请求。需要检查和调整前端请求的设置,确保与后端接口要求的请求格式一致,以解决前后端通信问题。

接口完成之后,自己使用postman测试了一下,没有问题;

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求? 第1张

可是在和小组前端调试接口的时候,他却说访问不了;

信息如下:(我自己写的一个打印请求信息的拦截器)

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求? 第2张

发现报错信息是:

 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

也就是说发送过来的内容格式为 “application/x-www-form-urlencoded;charset=UTF-8”,这个内容格式后端不支持;

主要是因为我的后端使用的是@RequestBody注解接收的参数

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求? 第3张

这个注解需要“application/json”格式的数据;

让后前端就加了一个

headers: {

                        'Content-Type': 'application/json;charset=UTF-8'

                    }

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求? 第4张

可是此时他使用的框架却报错了

Network Error

AxiosError: Network Error

    at XMLHttpRequest.handleError (webpack-internal:///.de_modules/axiosb/adapters/xhr.js:160:14)

并且我后端的信息如下:

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求? 第5张

请求方式为OPTION;(可是他发送的是Post)

我也看不懂

去问了一下chatgpt

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求? 第6张

也去搜了许多相关的博文,

后面发现将Content-Type设置成application/json会受到同源政策的限制。就会会先发送一个option请求嗅探服务器是否具有应答的能力,然后才会发送真正的请求。

此时关键的就来了,

"Access-Control-Allow-Headers"响应头告诉浏览器服务器允许的额外请求头,以便浏览器可以继续发送实际的跨域请求。

也就是说后端需要设置一个"Access-Control-Allow-Headers"让浏览器发送真实的跨域请求(这里设置了headers的请求);

代码如下:添加一个拦截器

package com.kzj.common.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter//需要启动类开启@ServletComponentScan才会生效
public class MyAddCrossOrigin implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response=(HttpServletResponse)servletResponse;
        //允许来自任何源的跨域请求
        response.setHeader("Access-Control-Allow-Origin", "*");
        //设置允许的请求头为"X-Requested-With"和"Content-Type"。这样设置允许浏览器发送带有这些请求头的跨域请求。
        response.setHeader("Access-Control-Allow-Headers","X-Requested-With, Content-Type");
        //指定了服务器允许的跨域请求方法
        response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE");
        filterChain.doFilter(servletRequest,response);
    }
}
  1. response.setHeader("Access-Control-Allow-Origin", "*");

    这一行设置了"Access-Control-Allow-Origin"响应头,将其值设置为"",表示允许来自任何源的跨域请求。使用""表示允许所有源进行访问。这可能存在一定的安全风险,因为允许所有源的访问可能导致潜在的安全问题。在生产环境中,应该根据实际需求将"*"替换为允许的具体源。

  2. response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");

    这一行设置了"Access-Control-Allow-Headers"响应头,指定了服务器允许接收的额外请求头。在这里,设置允许的请求头为"X-Requested-With"和"Content-Type"。这样设置允许浏览器发送带有这些请求头的跨域请求。

  3. response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE");

    这一行设置了"Access-Control-Allow-Methods"响应头,指定了服务器允许的跨域请求方法。在这里,设置允许的请求方法为POST、GET、PUT和DELETE。这样设置允许浏览器使用这些方法发起跨域请求。

通过这些设置,服务器告知浏览器允许来自任意源的跨域请求,并且允许接收特定的请求头和请求方法。这样可以解决浏览器中的跨域限制,使前端代码能够与后端进行跨域通信。

修改后后端就可以正常的收到请求了

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求),Postman可通行的请求与前端难题,添加Content-type后,后端为何收不到请求? 第7张


0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 【研发日记】Matlab/Simulink自动生成代码(二)——五种选择结构实现方法,Matlab/Simulink自动生成代码的五种选择结构实现方法(二),Matlab/Simulink自动生成代码的五种选择结构实现方法详解(二)
  • 超级好用的C++实用库之跨平台实用方法,跨平台实用方法的C++实用库超好用指南,C++跨平台实用库使用指南,超好用实用方法集合,C++跨平台实用库超好用指南,方法与技巧集合
  • 【动态规划】斐波那契数列模型(C++),斐波那契数列模型(C++实现与动态规划解析),斐波那契数列模型解析与C++实现(动态规划)
  • 【C++】,string类底层的模拟实现,C++中string类的模拟底层实现探究
  • uniapp 小程序实现微信授权登录(前端和后端),Uniapp小程序实现微信授权登录全流程(前端后端全攻略),Uniapp小程序微信授权登录全流程攻略,前端后端全指南
  • Vue脚手架的安装(保姆级教程),Vue脚手架保姆级安装教程,Vue脚手架保姆级安装指南,Vue脚手架保姆级安装指南,从零开始教你如何安装Vue脚手架
  • 如何在树莓派 Raspberry Pi中本地部署一个web站点并实现无公网IP远程访问,树莓派上本地部署Web站点及无公网IP远程访问指南,树莓派部署Web站点及无公网IP远程访问指南,本地部署与远程访问实践,树莓派部署Web站点及无公网IP远程访问实践指南,树莓派部署Web站点及无公网IP远程访问实践指南,本地部署与远程访问详解,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南。
  • vue2技术栈实现AI问答机器人功能(流式与非流式两种接口方法),Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法探究,Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法详解
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,0人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码