xhr.withCredentials发送跨域请求凭证
一、前言
今天遇到一个坑,浏览器请求数据的时候gg了。浏览器报错如下图:
因为请求头部设置了credentis mode is 'include', 从上面可以看出是Access-Control-Allow-Credentials这个响应必须设置为true。
二、思考
第一反应前端没有设置过这个值啊?应该走默认才对吧?测试环境OK啊!
---------------------------------真是一万只野马狂奔而过啊-------------------------------------
由于之前没有遇到过这个问题,对这个也没怎么关注,所以排错慢了点。
后面查了一下资料,然后回归一下代码,oh my god! 其他前端宝宝在请求中设置了这个:(因为是合作开发,我也没有注意这个,此处没有甩锅的ys)
config.withCredentials = true
那么前端设置上面这个有啥用?那为什么加了就报错呢?后台难道没有配合设置对应相应头部吗?
【后续想起】估计是后台小哥哥说过:“前端最好给后台传cookie和token” 这句话吧,导致前端小哥哥加上了这个设置,不过后面后台并没有设置cookie。所以没必要加啊,这就是信息不对称导致结果吧。
三、原理及处理方法
1、标准的跨域请求是不会发送cookie等用户认证凭据的,XMLHttpRequest 2的一个重要改进就是提供了对授信请求访问的支持。也就是说,如果发生跨域请求,又想携带cookie到服务器,前端请求和后端响应都必须设置:
2、前端请求:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xxx.com/api');
xhr.withCredentials = true;
xhr.onload = onLoadHandler;
xhr.send();
或者在axios请求配置中设置:
3、服务端响应头:
Access-Control-Allow-Credentials: true
如果服务端不设置该响应头,浏览器会报错,当然响应会被忽略不可用;
同时,服务端需指定一个域名(Access-Control-Allow-Origin:www.xxx.com),而不能使用泛型(Access-Control-Allow-Origin: *)不然即使设置了该头部,cookie开始不能转到服务器。
四、总结
1、本次错误是因为前端配置了Credentials:true,但是浏览器没有设置Access-Control-Allow-Credentials: true,且响应是Access-Control-Allow-Origin:*;
2、如果在跨域中希望浏览器能携带cookie到服务器,前后端都应该设置Credentials的值为true, 且Access-Control-Allow-Origin就不能设为星号,必须指定明确的,与请求网页一致的域名。,不然cookie还是不能携带过去;
3、Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie;
4、如果服务器不要浏览器发送cookie,前后端都不设置这个字段就好了。
xhr.withCredentials发送跨域请求凭证的更多相关文章
- Vue(八)发送跨域请求
使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法 使用this.$http ...
- Vue-cli3.x中使用Axios发送跨域请求的配置方法
Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...
- 利用 img 和 script 发送跨域请求
利用img.src可以发送http请求,但是发送http请求不是img.src的真正用意. 同样,用script.src去请求jsonp格式的接口数据也不是script元素的最初设计用途. 但是这些歪 ...
- [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
- AJAX请求和跨域请求详解(原生JS、Jquery)
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
- CORS——跨域请求那些事儿
在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...
- php分享二十五:跨域请求
问题: 跨域请求有几种方式? jsonp支持哪几种请求方式? 支持post请求吗? 支持get请求吗? 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域 ...
- Ajax和跨域请求
Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...
- [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
随机推荐
- 【算法】map的应用
map使用参考链接http://www.cnblogs.com/KID-XiaoYuan/articles/7297709.html 题目 在ACM比赛中,你每解决一道题,你就可以获得一个气球,不同颜 ...
- MSF内网渗透 扫描模块
端口扫描 auxiliary/scanner/portscan scanner/portscan/ack ACK防火墙扫描 scanner/portscan/ftpbounce FTP ...
- 20155326刘美岑 《网络对抗》Exp2 后门原理与实践
20155326刘美岑 <网络对抗>Exp2 后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启 ...
- Codeforces828 A. Restaurant Tables
A. Restaurant Tables time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Django Model 基础
程序涉及到数据库相关操作时,一般都会这样: 创建数据库,设计表结构和字段 使用 pymysql 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行数据库操作 import pymysq ...
- Spring 使用javaconfig配置aop
1.在xml中需要配置自动代理 /** * */ package com.junge.demo.spring.dao; import org.springframework.context.annot ...
- Go语言数据类型
目录 基本数据类型说明 整型 浮点型 字符 字符类型本质探讨 布尔型 字符串 指针 值类型与引用类型 基本数据类型默认值 基本数据类型相互转换 注意事项 其他基本类型转string类型 string类 ...
- 【Spark工作原理】stage划分原理理解
Job->Stage->Task开发完一个应用以后,把这个应用提交到Spark集群,这个应用叫Application.这个应用里面开发了很多代码,这些代码里面凡是遇到一个action操作, ...
- MySQL 线程池&连接池&长连接&短连接
线程池 简介 1.mysql每连接每线程,mysql都分配一个单独的线程,该线程处理客户端发来的所有命令 2.每个线程会占用一定的系统资源,线程数越多消耗的系统资源也越多 3.线程的创建和销毁有一定的 ...
- ubuntu解压rar文件
一般通过默认安装的ubuntu是不能解压rar文件的,只有在安装了rar解压工具之后,才可以解压.其实在ubuntu下安装rar解压工具是非常简 单的,只需要两个步骤就可以迅速搞定. ubuntu 下 ...