ajax请求时cookie,ajax跨域请求中的cookie问题

update 另一个问题

ajax在进行复杂请求如PUT,POST,DELETE等时，当请求为cross domain request是，会先发一个OPTIONS请求确认服务器的跨域支持情况，在发送原来的请求，所以对于服务器，需要对OPTIONS请求做一次xiang'yin

遇到的问题

对于前后端分离的应用，使用ajax跨域请求时，默认情况下是无法传输cookie的。具体的异常表现如下

客户端发送给服务器的请求中不包含cookie信息

服务器返回给客户端的响应中包含了Set Cookie 的信息，但是在浏览器的cookie中，没有记录词条cookie信息

解决方法

需要前后端都做一些小的改动

服务器端

以nodejs的后端为例，使用express框架，需要加上几行代码

app.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", config().allow_origin);

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("Access-Control-Allow-Credentials", "true");

res.header("X-Powered-By", ' 3.2.1')

res.header("Content-Type", "application/json;charset=utf-8");

next();

});

注意这句话：

res.header("Access-Control-Allow-Credentials", "true");

这句话用来允许跨域访问时带上cookie信息，此外有一个问题，就是当我们"Access-Control-Allow-Origin"设置为*的时候，上面这句话是无法使用的。所以不能够设置为*，否则无法使用cookie。

浏览器端

以jquery的ajax请求为例

$.ajax({

url,

type: 'get',

dataType: 'json',

// 允许跨域

crossDomain: true,

// 下面这句话允许跨域的cookie访问

xhrFields: {

withCredentials: true

success: (res) => {

console.log(res);

}

});

总结

这个问题就是这样解决的，建议只允许自己前端网站的域名进行跨域访问，防止CSRF之类的攻击。

ajax请求时cookie,ajax跨域请求中的cookie问题相关推荐

ajax跨域请求 xml,XMLHttpRequest的跨域请求
动态添加一个标签,而script标签的src属性是没有跨域的限制的.这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了. 这样其实"jQuery AJAX跨域问题& ...
AJAX（XMLHttpRequest）进行跨域请求方法详解（三）
意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 3,带验证信息的请求身份验证是Web开发中经常遇到的问题,在跨域 ...
AJAX（XMLHttpRequest）进行跨域请求方法详解（二）
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求预检请求首先需要向另外一个域名的资源发送一个 HT ...
uniapp前端向后端发送请求时，出现跨域问题的解决方法与原理
h5代理打开h5页面的端口是8081,实际访问的后端端口是8021 修改方式: 在manifest里的源码模式中,添加如下代码: 调用接口的地方这样写: 原理: 直接访问8021端口时,显示跨域问题 ...
java跨域请求,且附上前端跨域请求代码
为了跟上新的潮流,学习前后端分离的概念及技术是必须的,跨域也随之而产生. 首先确定什么是前后端分离,它不仅是对代码的解耦,也是对开发人员的解耦,真正的前端是前端,后台是后台,开发速度至少快一倍. 即你 ...
前端跨域请求get_解决前端跨域请求的几种方式
利用 JSONP 实现跨域调用说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问 ...
bat怎么发起网络请求_因为一个跨域请求，我差点丢了饭碗
浏览器基本原理我叫小风,是Windows帝国一个普通的上班族.今天,我入职了一家浏览器公司,公司的主营业务是为人类提供Internet上网服务,我的岗位是负责执行JavaScript代码. 上午的晨 ...
axios不发起请求_axios无法发起跨域请求
具体情况看截图我封装了一个ajax模块,源码如下 import axios from 'axios' import Qs from 'qs' export default { post: funct ...
php vue 跨域请求数据6,Vue跨域请求问题解决方案过程解析
查看页面响应信息,提示跨域有问题 #### 二.解决上面跨域问题:根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: ...
跨域（什么样的请求方式才叫跨域请求？）
首先跨域是浏览器安全限制的,不是服务器限制的. 协议不同算跨域,例如:http和https. 端口号不同算跨域,例如:80和8080. 域名不同算跨域,例如:baidu.com和jingdong.co ...

ajax请求时cookie,ajax跨域请求中的cookie问题

ajax请求时cookie,ajax跨域请求中的cookie问题相关推荐

最新文章

热门文章