关于前后端自动携带cookie跨域问题

前端自动携带cookie配置

css 复制代码
	let v = document.getElementById("txt").value;
			let url = 'http://127.0.0.1/verify';
			
			//axios 携带cookie
			const options = {
			  method: 'POST',
			  url: url,
			  headers: {'content-type': 'application/json'},
			  withCredentials:true,
			  data: {code: '11'}
			};
			
			axios.request(options).then(function (response) {
			  console.log(response.data);
			}).catch(function (error) {
			  console.error(error);
			});

			  
			  
			  // fetch 携带cookie
			  const options = {method: 'POST',
			   headers: {
			   'Content-Type': 'application/json'
			   },
				credentials: 'include',
			    body: '{"code":"11"}'
			  };
			  
			  fetch(url, options)
			    .then(response => response.json())
			    .then(response => console.log(response))
			    .catch(err => console.error(err));
			  
			  
			  
			// ajax 携带cookie  
			$.ajax({
				url: url,
				type: 'POST',
				dataType: 'json',
				contentType: "application/json",
				data:JSON.stringify({'code':v}),
				xhrFields: {
								withCredentials: true
							},
				success: function(res){
					// 成功处理逻辑
					console.log(res)
				 },
				error: function(res){
					// 错误时处理逻辑
					}
						});
			 }

后端配置

css 复制代码
 response.setHeader("Access-Control-Allow-Origin", origin);
       response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
       response.setHeader("Access-Control-Max-Age", "3600");

       //允许后端携带的请求头
       response.setHeader("Access-Control-Allow-Headers", "X-Custom-Header, Upgrade-Insecure-Requests,Accept,Content-Type, x-requested-with,withCredentials,credentials");
       // 是否允许跨源请求携带凭据(如 Cookie、TLS 客户端证书或包含用户名和密码的认证头)
       response.setHeader("Access-Control-Allow-Credentials","true");
相关推荐
摇滚侠7 小时前
《SpringBoot 3:入门与应用实战》第 9 章 跨域问题 阅读笔记 27
spring boot·笔记·okhttp
刘广睿2 天前
断点续传与分片下载是怎么实现的?Range 请求在视频下载中的工程实践
okhttp·ffmpeg·音视频·下载·python3.11
泡海椒7 天前
JQuick-Curl vs RestTemplate / OkHttp / OpenFeign:框架选型对比,谁更适合第三方接口调用?
okhttp
Co_Hui11 天前
OkHttp 原理
okhttp
殷忆枫11 天前
BOA服务器下实现视频回放功能(CGI+软链接方案)
服务器·okhttp·音视频
消失的旧时光-194313 天前
第十篇:Ktor Custom Client Plugin:从 OkHttp Interceptor 真正理解请求与响应生命周期
okhttp·plugin·ktor·kmp
mmsx13 天前
基于 Android 的校园信息管理系统源码
android·java·okhttp
Full Stack Developme20 天前
跨站请求伪造 (CSRF) 是什么 设计及工作原理
前端·okhttp·csrf
weixin_4407841123 天前
【OkHttp实现原理】
android·java·okhttp
AZaLEan__1 个月前
原生XMLHttpRequest + axios + fetch
okhttp