网站开发技术有什么删除的网站做404

网站开发技术有什么,删除的网站做404,wordpress按钮弹图片,前端设计师主要做什么一、核心结论 withCredentials 是 axios 中控制跨域请求是否携带凭证#xff08;Cookie、HTTP 认证信息、TLS 客户端证书等#xff09; 的布尔值配置项#xff0c;本质是对浏览器 XMLHttpRequest.withCredentials 原生属性的封装#xff0c;默认值为 false。 简单说#x…一、核心结论withCredentials是 axios 中控制跨域请求是否携带凭证Cookie、HTTP 认证信息、TLS 客户端证书等的布尔值配置项本质是对浏览器XMLHttpRequest.withCredentials原生属性的封装默认值为false。简单说withCredentials: false默认跨域请求时浏览器不会携带目标域名下的 Cookie/认证信息withCredentials: true跨域请求时浏览器会主动携带目标域名下的 Cookie/认证信息且服务端响应的 Set-Cookie 也会生效。注意该配置仅对跨域请求有效同域请求不受影响默认携带凭证。二、底层原理浏览器的同源策略 CORS 规范要理解withCredentials必须先明确浏览器的核心规则1. 同源策略的限制浏览器默认禁止跨域请求携带凭证比如 A 域名请求 B 域名接口时不会带 B 域名的 Cookie这是为了防止第三方网站盗用用户的认证信息。2. CORS 规范对凭证的要求当前端设置withCredentials: true时必须满足服务端客户端双向配置否则请求会被浏览器拦截端必要配置前端axioswithCredentials: true服务端响应头必须包含1. Access-Control-Allow-Credentials: true2. Access-Control-Allow-Origin 不能为 *必须是具体域名如 https://xxx.com三、withCredentials具体行为拆解1. 当withCredentials: false默认请求阶段浏览器发送跨域请求时不会携带目标域名的 Cookie、Authorization 头等凭证响应阶段即使服务端返回Set-Cookie响应头浏览器也不会保存该 Cookie相当于忽略场景无需用户认证的跨域请求如公开接口、静态资源。2. 当withCredentials: true请求阶段浏览器主动携带目标域名下的 Cookie仅该域名的 Cookie非当前域名、HTTP 认证信息如 Basic Auth响应阶段 ✅ 若服务端返回Access-Control-Allow-Credentials: true 具体的Access-Control-Allow-Origin浏览器会保存服务端的Set-Cookie且后续请求会自动携带 ❌ 若服务端未满足上述条件浏览器会触发 CORS 错误拦截响应控制台报错Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy: The value of the Access-Control-Allow-Credentials header in the response is which must be true when the requests credentials mode is include场景需要用户登录态的跨域请求如登录后获取用户信息、提交订单。四、典型使用场景 示例场景前端http://localhost:3000请求后端http://api.example.com的登录接口// axios 配置前端 axios({ url: http://api.example.com/user/info, method: GET, withCredentials: true, // 跨域携带 Cookie后端域名下的登录 Cookie }) .then(res console.log(res)) .catch(err console.log(err));服务端配置以 Node.js/Express 为例const express require(express); const app express(); // 跨域中间件配置 app.use((req, res, next) { // 允许指定前端域名跨域不能用 * res.setHeader(Access-Control-Allow-Origin, http://localhost:3000); // 允许携带凭证 res.setHeader(Access-Control-Allow-Credentials, true); // 允许的请求头 res.setHeader(Access-Control-Allow-Headers, Content-Type); next(); }); // 接口返回用户信息依赖 Cookie 中的登录态 app.get(/user/info, (req, res) { res.json({ name: 张三, id: 123 }); }); app.listen(8080);五、常见坑点Access-Control-Allow-Origin不能为* 若服务端设置*同时前端开了withCredentials: true浏览器会直接拦截请求因为*无法和具体域名的凭证绑定。跨域 Cookie 的 SameSite 限制 若服务端设置的 Cookie 的SameSite为Strict/Lax跨域请求时即使开了withCredentialsCookie 也可能无法携带需设置SameSiteNone; Secure且请求必须是 HTTPS。凭证仅对目标域名生效 比如前端a.com请求b.comwithCredentials: true只会携带b.com的 Cookie而非a.com的 Cookie。预检请求OPTIONS也需配置 复杂请求如 POST 带 JSON、自定义头会先发送 OPTIONS 预检请求服务端必须对 OPTIONS 请求返回相同的 CORS 配置尤其是Access-Control-Allow-Credentials。六、总结withCredentials的核心作用是突破浏览器同源策略对跨域凭证的限制让跨域请求能携带 Cookie/认证信息但必须配合服务端的 CORS 配置才能生效。它是实现跨域登录态保持的关键配置也是处理跨域认证请求的必备项。原文 https://juejin.cn/post/75864798