postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求)

这篇具有很好参考价值的文章主要介绍了postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

postman能访问 前端不能,前端

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

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

postman能访问 前端不能,前端

发现报错信息是:

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

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

postman能访问 前端不能,前端

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

让后前端就加了一个

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

postman能访问 前端不能,前端

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

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

并且我后端的信息如下:

postman能访问 前端不能,前端

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

我也看不懂

去问了一下chatgpt

postman能访问 前端不能,前端

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

后面发现将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能访问 前端不能,前端文章来源地址https://www.toymoban.com/news/detail-756996.html

到了这里,关于postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • postman自动添加token和请求头

    概要:在使用postman时,经常需要在每个请求里面添加鉴权token和一些通用的请求头,本文主要描述如何解决这两个问题。 创建一个全局变量token,然后从鉴权接口拿到token写到全局变量里去,然后再在接口文件夹里去设置对整个文件夹下接口生效的局部变量,这样此文件夹下

    2024年04月23日
    浏览(29)
  • Postman在请求体中添加注释

    在Postman的Pre-request Script(前置脚本)中放入下放代码,就可以在请求体中添加注释

    2024年02月12日
    浏览(36)
  • 如何为Postman请求自动添加请求返回值作为另一请求传入参数

            在请求的时候会遇到需要带TOKEN的请求,就需要先请求一次获取TOKEN的请求再将返回的值粘贴到下次要请求的地方,这样很麻烦,而POSTMAN提供了方法自动填入传输参数。这里需要两个接口,1号接口是获取TOKEN的,2号接口是需要使用TOKEN的。 这里设置了一个connecti

    2024年02月13日
    浏览(39)
  • 精通postman教程(四)-创建请求及添加参数 详解

    作为一名测试工程师,那么Postman绝对是大伙必备的工具之一。 在这个系列教程中,我将为大伙详细讲解如何使用Postman进行API测试。 今天我为大伙讲解postman如何创建请求及添加参数,让你们快速上手这款工具。 Get请求用于从指定的URL获取信息,不会对端点进行任何更改。

    2024年02月15日
    浏览(39)
  • RestTemplate发起POST请求 突然返回错误码500,但相同的请求再postman中是可以调用

    一个之前一直跑的很正常的springboot项目,RestTemplate发起POST请求 突然一直返回错误码500,但相同的请求再postman中是可以调用的。 删除RestTemplateConfig中的 factory.setBufferRequestBody(false); 即可正常调用。 注意 :网上说bufferRequestBody 是标志是否使用缓存流的形式,默认是 true,缺点

    2024年02月12日
    浏览(51)
  • vue向api请求不到数据,返回了一个html页面,使用postman发送请求却可以得到数据

    在vue.config.js中配置了代理 然后向这个接口传入参数发送post请求,希望获取数据 在使用axios发送post请求时,却发现得不到数据,返回了一个页面 输出: 但是使用postman向api发送请求却可以得到数据 这里其实是因为后端会对请求的ip地址做一个分析,如果直接使用localhost:8080访

    2024年02月11日
    浏览(45)
  • postman登录获取token,接口header中添加token发送请求

    该文章只是用于记录,防止自己忘记。 1、准备登录接口 2、添加全局变量 3、添加一个登录接口,登录获取token,将获取到的token设置到全局变量中 4、密码加密 var password = pm.environment.get(“password”);//获取环境变量password的值 var md5Password= CryptoJS.MD5(password).toString();//使用MD5()方

    2024年02月10日
    浏览(49)
  • 记录--前端中 JS 发起的请求可以暂停吗

    在前端中,JavaScript(JS)可以使用XMLHttpRequest对象或fetch API来发起网络请求。然而,JavaScript本身并没有提供直接的方法来暂停请求的执行。一旦请求被发送,它会继续执行并等待响应。 尽管如此,你可以通过一些技巧或库来模拟请求的暂停和继续执行。下面是一种常见的方法

    2024年02月05日
    浏览(38)
  • Springboot通过前端发起请求,上传excel文件解析数据 postman进行操作

    springboot版本3.2.0,数据库版本8 mybatisplus版本3.5.4.1 controller层 测试结果 后端返回数据 Postman返回数据 注意 使用postman进行测试时,需要把key传进去,不然会报空文件异常,

    2024年01月18日
    浏览(56)
  • Jmeter 使用multipart/form-data传递参数,后端拿不到参数数据,同样的请求,同样的参数,postman却可以

    提示:阅读本章之前,请先阅读目录 我遇到了一个怪事,就是同一个接口,同样的参数,同样的数据,postman可以请求,但是jmeter却不行,因为接口需要使用到multipart/form-data的提交方法,所以,出现这个情况,首先,察觉到该问题,主要还是因为multipart/form-data 在jmeter中,你

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包