日常开发记录-axios.defaults.headers['X-Request-With'] = 'XMLHttpRequest'

最新推荐文章于 2024-04-15 20:55:39 发布
原创 最新推荐文章于 2024-04-15 20:55:39 发布 · 92 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#服务器 #前端 #javascript #运维 #开发语言

本文介绍了X-Requested-With头字段的作用，特别是在区分AJAX请求与普通请求方面。当该字段值为'XMLHttpRequest'时，表明请求是由JavaScript发起的异步请求；若值为空，则通常为表单提交等常规请求方式。 
// X-Requested-With: XMLHttpRequest是给服务器用的，用于区别 AJAX 请求(异步)还是普通(同步)的请求(一般指表单提交)的
// x-requested-with 赋予 ‘XMLHttpRequest’ 值表示这是一个ajax请求，而如果值为null的话 表示一个普通的请求，服务器用来检测是否为异步 
// 如果服务器没做任何针对的反馈那么都一样。

 转载：http://t.csdn.cn/wKkGD

http请求头中的X-Requested-With标示是什么
墨痕诉清风的博客
02-02 3503
是一个 HTTP 请求头，通常在 AJAX 请求中用来标识请求是由 JavaScript 发送的。这个头部信息可以用来防止 CSRF（跨站请求伪造）攻击。当一个请求包含头并且其值为时，服务器可以知道这个请求是一个 AJAX 请求。这样，服务器就可以实施额外的安全措施，例如检查请求的来源是否合法。然而，值得注意的是，尽管可以提供额外的安全性，但它并不是 CSRF 攻击的唯一解决方案。为了实现更强的安全性，应该结合使用其他的安全措施，如 CSRF 令牌。
Web安全之XXE漏洞_x-requested-with xmlhttprequest(1)
2401_83947398的博客
04-14 947
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
Web安全之XXE漏洞_x-requested-with xmlhttprequest，网络安全性能优化之启动优化实战篇
jixuczy的博客
04-15 1195
/包括数据包中的数据可能是如下的这种形式，都可以进行一个判断。//文件类型为 XML。//请求头含有XML。
Python爬虫——requests
weixin_51627088的博客
06-09 1082
Requests requests是python语言编写，基于urllib，比urllib更加方便，节约大量工作，完全满足http测试工作。 可使用命令pip install requests安装requests库 常用方法 请求 GET：请求指定的页面信息，返回实现主体 HEAD：只请求页面的首部 POST：请求服务器接受所有指定的文档作为对所标识的URL的新的从属体 DELETE：请求服务器删除指定页面 HEAD：类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头 CONNECT：把服务
ajax跨域请求 xml,跨域ajax请求中 X-Requested-With: XMLHttpRequest 没有了，有办法自定义吗？...
weixin_39645003的博客
08-05 641
这是ApiPost软件模拟的请求，可以设定Header中的 X-Requested-With: XMLHttpRequest，提交后，正常返回数据！然后本地ajax请求，发现少了这两个参数，导致报500错误！！！是否有办法在ajax请求中添加这X-Requested-With: XMLHttpRequest这两个？？？$.ajax({url:url,type:type,dataType:dataT...
X-Requested-With: XMLHttpRequest，这段代码是干什么的？底层原理是什么？
长风破浪会有时的博客
07-15 3098
是一个 HTTP 请求头部信息，用于在 AJAX 请求中标识该请求是由浏览器的 XMLHttpRequest 对象发起的。服务器可以根据这个请求头来判断请求类型，并采取相应的处理方式。底层原理是，当使用 XMLHttpRequest 对象发送 AJAX 请求时，浏览器会将该请求标识为 XMLHttpRequest 类型，并将。请求头的值来判断请求是通过 AJAX 发起的，而不是普通的页面请求。是一个 HTTP 请求头部信息。这样，服务器可以根据这个请求头来判断请求的类型，并采取相应的处理方式。
解释代码：axios.defaults.withCredentials = true axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest' axios.defaults.headers['token'] = localStorage.getItem('token') || '' axios.defaults.headers.post['Content-Type'] = 'application/json'
03-10
X-Requested-With 设置为 XMLHttpRequest 表示使用 AJAX 请求。token 是一个自定义的请求头，用于传递用户的身份认证信息。Content-Type 设置为 application/json 表示请求体的数据格式为 JSON。
HotelDetailView.vue:114 GET http://localhost:8080/api/hotels/1/room-types 403 (Forbidden) dispatchXhrRequest @ xhr.js:195 xhr @ xhr.js:15 dispatchRequest @ dispatchRequest.js:51 Promise.then _request @ Axios.js:163 request @ Axios.js:40 Axios.<computed> @ Axios.js:213 wrap @ bind.js:5 fetchHotelDetails @ HotelDetailView.vue:114 (匿名) @ runtime-core.esm-bundler.js:2836 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2816 flushPostFlushCbs @ runtime-core.esm-bundler.js:385 flushJobs @ runtime-core.esm-bundler.js:427 Promise.then queueFlush @ runtime-core.esm-bundler.js:322 queueJob @ runtime-core.esm-bundler.js:317 effect2.scheduler @ runtime-core.esm-bundler.js:5480 trigger @ reactivity.esm-bundler.js:265 endBatch @ reactivity.esm-bundler.js:323 notify @ reactivity.esm-bundler.js:614 trigger @ reactivity.esm-bundler.js:588 set value @ reactivity.esm-bundler.js:1465 finalizeNavigation @ vue-router.mjs:3503 (匿名) @ vue-router.mjs:3368 Promise.then pushWithRedirect @ vue-router.mjs:3335 push @ vue-router.mjs:3260 navigate @ vue-router.mjs:2315 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729 api.js:46 Forbidden access - you do not have permission to access this resource. (匿名) @ api.js:46 Promise.then _request @ Axios.js:163 request @ Axios.js:40 Axios.<computed> @ Axios.js:213 wrap @ bind.js:5 fetchHotelDetails @ HotelDetailView.vue:114 (匿名) @ runtime-core.esm-bundler.js:2836 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2816 flushPostFlushCbs @ runtime-core.esm-bundler.js:385 flushJobs @ runtime-core.esm-bundler.js:427 Promise.then queueFlush @ runtime-core.esm-bundler.js:322 queueJob @ runtime-core.esm-bundler.js:317 effect2.scheduler @ runtime-core.esm-bundler.js:5480 trigger @ reactivity.esm-bundler.js:265 endBatch @ reactivity.esm-bundler.js:323 notify @ reactivity.esm-bundler.js:614 trigger @ reactivity.esm-bundler.js:588 set value @ reactivity.esm-bundler.js:1465 finalizeNavigation @ vue-router.mjs:3503 (匿名) @ vue-router.mjs:3368 Promise.then pushWithRedirect @ vue-router.mjs:3335 push @ vue-router.mjs:3260 navigate @ vue-router.mjs:2315 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729 HotelDetailView.vue:122 Failed to fetch hotel details or room types: AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} fetchHotelDetails @ HotelDetailView.vue:122 await in fetchHotelDetails (匿名) @ runtime-core.esm-bundler.js:2836 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2816 flushPostFlushCbs @ runtime-core.esm-bundler.js:385 flushJobs @ runtime-core.esm-bundler.js:427 Promise.then queueFlush @ runtime-core.esm-bundler.js:322 queueJob @ runtime-core.esm-bundler.js:317 effect2.scheduler @ runtime-core.esm-bundler.js:5480 trigger @ reactivity.esm-bundler.js:265 endBatch @ reactivity.esm-bundler.js:323 notify @ reactivity.esm-bundler.js:614 trigger @ reactivity.esm-bundler.js:588 set value @ reactivity.esm-bundler.js:1465 finalizeNavigation @ vue-router.mjs:3503 (匿名) @ vue-router.mjs:3368 Promise.then pushWithRedirect @ vue-router.mjs:3335 push @ vue-router.mjs:3260 navigate @ vue-router.mjs:2315 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729 authStore.js:49 POST http://localhost:8080/api/users/login 403 (Forbidden) dispatchXhrRequest @ xhr.js:195 xhr @ xhr.js:15 dispatchRequest @ dispatchRequest.js:51 Promise.then _request @ Axios.js:163 request @ Axios.js:40 httpMethod @ Axios.js:226 wrap @ bind.js:5 login @ authStore.js:49 wrappedAction @ pinia.mjs:1399 store.<computed> @ pinia.mjs:932 handleLogin @ Auth.vue:219 await in handleLogin cache.<computed>.cache.<computed> @ runtime-dom.esm-bundler.js:1713 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729 api.js:46 Forbidden access - you do not have permission to access this resource. (匿名) @ api.js:46 Promise.then _request @ Axios.js:163 request @ Axios.js:40 httpMethod @ Axios.js:226 wrap @ bind.js:5 login @ authStore.js:49 wrappedAction @ pinia.mjs:1399 store.<computed> @ pinia.mjs:932 handleLogin @ Auth.vue:219 await in handleLogin cache.<computed>.cache.<computed> @ runtime-dom.esm-bundler.js:1713 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729 settle.js:19 Uncaught (in promise) AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
06-24
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); next(); }...
axios中已经设置了headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE', 'Access-Control-Allow-Headers': 'Content-Type, X-Auth-Token, Origin, Authorization' }，还需要axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'吗
06-07
`axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'`这行代码其实是设置`'X-Requested-With'`请求头，该请求头用于标识当前请求是由XMLHttpRequest发起的。而`Access-Control-Allow-Origin`、`...
import axios from 'axios'; import qs from 'qs' // import da from "element-ui/src/locale/lang/da"; // import manage from './manage.js' // axios.defaults.baseURL = manage.apiHost; // import { getToken,clear } from '@/utils/auth' axios.defaults.timeout = 60 * 1000 * 10; // axios.defaults.cache = false // console.log("当前环境",process.env.NODE_ENV); // /*第一层if判断生产环境和开发环境*/ // if (process.env.NODE_ENV === 'production') { // /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/ // if (process.env.VUE_APP_FLAG === 'pro') { // //production 生产环境 // axios.defaults.baseURL = 'http://127.0.0.1:8080'; // } else { // //test 测试环境 // axios.defaults.baseURL = 'http://127.0.0.1:8080'; // } // } else { // //dev 开发环境 // // axios.defaults.baseURL = 'http://127.0.0.1:8080'; // } // // let baseUrl = axios.defaults.baseURL; // // console.log("当前host：", baseUrl); axios.interceptors.request.use( config => { // config.headers['X-Requested-With'] = 'XMLHttpRequest' // config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; // config.headers['Content-Type'] = 'application/json; charset=UTF-8'; // config.data = qs.stringify(manage.data) // config.headers['Content-Type'] = 'application/json; charset=UTF-8'; // config.headers['Authorization'] = getToken() ? getToken() : null; // manage.headers['X-CSRFToken'] = sessionStorage.getItem('csrftoken'); // config.headers['Cookie'] = 'Hm_lvt_b0668f30d62e1597bdb36d05edea8960=1604221499,1604560772,1604655241; Hm_lpvt_b0668f30d62e1597bdb36d05edea8960=1604911501; sid=f2295ce4-5905-47d2-b119-9747e7749674'; return config; }, error => { return Promise.reject(error); } ); axios.interceptors.response.use( response => { return response; }, error => { return Promise.reject(error); } ); function checkStatus(response) { if (response.status === 200 || response.status === 304) { return response['data']; } else { throw new Error(response.data.message); // eslint-disable-line } throw new Error(response.statusText); // eslint-disable-line } export function request(config) { return axios.request(config).then(checkStatus); } export function get(url, params) { // let queryData = Object.assign(params, {t: new Date().getTime()}) return axios.get(url, {params}).then(checkStatus); } export function delet(url, params) { return axios.delete(url, params).then(checkStatus); } export function post(url, data, config) { return axios.post(url, qs.stringify(data), config).then(checkStatus); } export function postDefine(url, data, config) { return axios.post(url, data, config).then(checkStatus); } export function postData(url, data, config) { return axios.post(url, data, config).then(checkStatus); } export function put(url, data, config) { return axios.put(url, data, config).then(checkStatus); } export function patch(url, data, config) { return axios.patch(url, data, config).then(checkStatus); }
最新发布
12-09
axios.defaults.timeout = 60 * 1000 * 10; ``` - 设置请求超时时间为 600 秒。 3. **请求拦截器** ```js axios.interceptors.request.use(...) ``` - 在请求发出前做一些处理，如添加 headers、token 等。 ...
runtime-core.esm-bundler.js:41 [Vue warn]: Missing required prop: "index" at <ElSubMenu> at <BaseTransition mode="out-in" onBeforeEnter=fn<onBeforeEnter> onEnter=fn ... > at <Transition mode="out-in" onBeforeEnter=fn<onBeforeEnter> onEnter=fn<onEnter> ... > at <ElMenuCollapseTransition> at <ElMenu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" ... > at <ElAside width="200px" > at <ElContainer class="layout-container" > at <Layout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App> warn2 @ runtime-core.esm-bundler.js:41 api/user/userInfo:1 Failed to load resource: the server responded with a status of 401 (Unauthorized) api/category:1 Failed to load resource: the server responded with a status of 401 (Unauthorized) api/article?pageNum=1&pageSize=3:1 Failed to load resource: the server responded with a status of 401 (Unauthorized) settle.js:19 Uncaught (in promise) AxiosError settle.js:19 Uncaught (in promise) AxiosError settle.js:19 Uncaught (in promise) AxiosError user.js:11 POST http://localhost:5173/api/user/register 500 (Internal Server Error) dispatchXhrRequest @ xhr.js:256 xhr @ xhr.js:49 dispatchRequest @ dispatchRequest.js:51 Promise.then request @ Axios.js:122 httpMethod @ Axios.js:185 wrap @ bind.js:5 userRegisterService @ user.js:11 register @ Login.vue:44 callWithErrorHandling @ runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 emit @ runtime-core.esm-bundler.js:669 (匿名) @ runtime-core.esm-bundler.js:7479 handleClick @ use-button.ts:57 callWithErrorHandling @ runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 invoker @ runtime-dom.esm-bundler.js:595 use-button.ts:57 [Vue warn]: Unhandled error during execution of component event handler at <ElButton class="button" type="primary" auto-insert-space="" ... > at <ElFormItem> at <ElForm key=0 ref="form" size="large" ... > at <ElCol span=6 offset=3 class="form" > at <ElRow class="login-page" > at <Login onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > at <RouterView> at <App> warn2 @ runtime-core.esm-bundler.js:41 logError @ runtime-core.esm-bundler.js:216 handleError @ runtime-core.esm-bundler.js:208 (匿名) @ runtime-core.esm-bundler.js:169 Promise.catch callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:168 emit @ runtime-core.esm-bundler.js:669 (匿名) @ runtime-core.esm-bundler.js:7479 handleClick @ use-button.ts:57 callWithErrorHandling @ runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 invoker @ runtime-dom.esm-bundler.js:595 settle.js:19 Uncaught (in promise) AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …} settle @ settle.js:19 onloadend @ xhr.js:112 XMLHttpRequest.send dispatchXhrRequest @ xhr.js:256 xhr @ xhr.js:49 dispatchRequest @ dispatchRequest.js:51 Promise.then request @ Axios.js:122 httpMethod @ Axios.js:185 wrap @ bind.js:5 userRegisterService @ user.js:11 register @ Login.vue:44 callWithErrorHandling @ runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 emit @ runtime-core.esm-bundler.js:669 (匿名) @ runtime-core.esm-bundler.js:7479 handleClick @ use-button.ts:57 callWithErrorHandling @ runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 invoker @ runtime-dom.esm-bundler.js:595
11-28
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`; ``` - **刷新令牌**：如果令牌过期，可以实现令牌刷新机制。 ```javascript axios.interceptors.response.use( response => response, ...
请求头中x-requested-with 的作用
m0_60882142的博客
01-05 1068
请求头中x-requested-with 的作用
x-requested-with的作用以及用法详解
stay hungry ! stay foolish!
09-11 1754
x-requested-with的作用以及用法详解 x-requested-with 请求头 区分ajax请求还是普通请求 在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)： 　　两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数 　　1、传统同步请求参数 accept text/html,application/xht...
Python 爬虫 学习之路（一）Request模块
dmguying的博客
01-29 469
爬虫的基础知识 概念：网络爬虫（又被称为网页蜘蛛，网络机器人）就是模拟客户端发送网络请求，接收请求响应，一种按照一定的规则，自动地抓取互联网信息的程序。原则上,只要是浏览器(客户端)能做的事情，爬虫都能够做 分类：爬虫分为通用爬虫和聚焦爬虫 通用爬虫 ：通常指搜索引擎的爬虫 聚焦爬虫 ：针对特定网站的爬虫 http和https http超文本传输协议，是基于C/S架构进行通信的协议，运行在在...
axios/前后端请求问题
song854601134的博客
11-15 1219
【代码】axios知识/前后端请求问题。
Http请求头中X-Requested-With的含义
热门推荐
zhangge3663的博客
06-19 2万+
昨天看代码的时候，看到了这个一句 String requestedWith = ((HttpServletRequest) request).getHeader("X-Requested-With"); X-Requested-With看到这个玩意并不知道是啥 于是查了一下 if (request.getHeader("x-requested-with") != null &...
python模拟ajax请求_python接口自动化37-模拟ajax异步请求(X-Requested-With:XMLHttpRequest)...
weixin_30817835的博客
02-04 837
前言有些接口请求头部带上X-Requested-With:XMLHttpRequest ，返回数据是 json 。如果头部不加这个参数，返回数据是普通 html 文本。这种头部带上X-Requested-With:XMLHttpRequest的是 Ajax 异步请求。Ajax 请求Ajax 即 “Asynchronous Javascript And XML”(异步 JavaScript 和 XM...
axios设置请求头
小易不止于搬砖的博客
05-07 7850
axios设置请求头方式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值