Ajax跨域访问时Cookie丢失怎么解决-js教程-PHP中文网

首页

web前端

js教程

Ajax跨域访问时Cookie丢失怎么解决

php中世界最好的语言

Apr 02, 2018 pm 04:05 PM

ajaxcookieie

这次给大家带来Ajax跨域访问时Cookie丢失怎么解决，解决Ajax跨域访问时Cookie丢失的注意事项有哪些，下面就是实战案例，一起来看一下。

ajax跨域访问，可以使用jsonp方法或设置Access-Control-Allow-Origin实现，关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章《ajax 设置Access-Control-Allow-Origin实现跨域访问》

1.ajax跨域访问,cookie丢失

首先创建两个测试域名

a.fdipzone.com 作为客户端域名

b.fdipzone.com 作为服务端域名

测试代码

setcookie.PHP 用于设置服务端cookie

<?php
setcookie(&#39;data&#39;, time(), time()+3600);
?>

server.php 用于被客户端请求

<?php
$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;
$ret = array(
 &#39;success&#39; => true,
 'name' => $name,
 'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:http://a.fdipzone.com');
// 响应类型
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('content-type:application/json');
echo json_encode($ret);
?>

test.html 客户端请求页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <title> ajax 跨域访问cookie丢失的解决方法 </title>
 </head>
 <body>
 <script type="text/javascript">
 $(function(){
  $.ajax({
   url: 'http://b.fdipzone.com/server.php', // 跨域
   dataType: 'json',
   type: 'post',
   data: {'name':'fdipzone'},
   success:function(ret){
    if(ret['success']==true){
     alert('cookie:' + ret['cookie']);
    }
   }
  });
 })
 </script>
 </body>
</html>

首先先执行http://b.fdipzone.com/setcookie.php, 创建服务端cookie。

然后执行http://a.fdipzone.com/test.html

输出

{"success":true,"name":"fdipzone","cookie":""}

获取cookie失败。

2.解决方法

客户端

请求时将withCredentials属性设置为true

使可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求，会用下面的HTTP头部来响应。

服务端

设置header

header("Access-Control-Allow-Credentials:true");

允许请求带有验证信息

test.html 修改如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <title> ajax 跨域访问cookie丢失的解决方法 </title>
 </head>
 <body>
 <script type="text/javascript">
 $(function(){
  $.ajax({
   url: 'http://b.fdipzone.com/server.php', // 跨域
   xhrFields:{withCredentials: true}, // 发送凭据
   dataType: 'json',
   type: 'post',
   data: {'name':'fdipzone'},
   success:function(ret){
    if(ret['success']==true){
     alert('cookie:' + ret['cookie']);
    }
   }
  });
 })
 </script>
 </body>
</html>

server.php 修改如下

<?php
$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;
$ret = array(
 &#39;success&#39; => true,
 'name' => $name,
 'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:http://a.fdipzone.com');
// 响应类型
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
// 是否允许请求带有验证信息
header('Access-Control-Allow-Credentials:true');
header('content-type:application/json');
echo json_encode($ret);
?>

按之前步骤执行，请求返回

{"success":true,"name":"fdipzone","cookie":"1484558863"}

获取cookie成功

3.注意事项

1.如果客户端设置了withCredentials属性设置为true，而服务端没有设置Access-Control-Allow-Credentials:true，请求时会返回错误。

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://a.fdipzone.com' is therefore not allowed access.

2.服务端header设置Access-Control-Allow-Credentials:true后，Access-Control-Allow-Origin不可以设为*，必须设置为一个域名，否则回返回错误。

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' heade

下面看下Ajax跨域请求COOKIE无法带上的解决办法

原生ajax请求方式：

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); 
xhr.withCredentials = true; //支持跨域发送cookies
xhr.send();

jquery的ajax的post方法请求：

 $.ajax({
    type: "POST",
    url: "http://xxx.com/api/test",
    dataType: 'jsonp',
    xhrFields: {
      withCredentials: true
    },
   crossDomain: true,
   success:function(){
  },
   error:function(){
 }
})

服务器端设置：

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用Ajax实现注册与头像上传功能

使用ajax实现分页技术的步奏详解（附代码）

在Ajax的请求中async:false与async:true有什么区别

以上是Ajax跨域访问时Cookie丢失怎么解决的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

修复：谷歌浏览器请求太多错误 429 [已解决]Apr 16, 2023 am 09:22 AM

近期很多Windows用户反映，当他们尝试访问某个URL时，PC上的GoogleChrome浏览器显示错误429。这是因为每次用户尝试在短时间内通过浏览器。通常，此错误是由网站生成的，以避免通过向服务器发送过多请求而被机器人或黑客入侵病毒。用户对在这个阶段可以做什么感到困惑，并因此感到失望。导致此错误的因素可能很多，我们在下面列出了其中一些因素。缓存内存和其他站点数据未清除从第三方来源安装的扩展系统上的一些有害软件病毒攻击在研究了上面列出的因素之后，我们在这篇文章中收集了一些修复程序，这

如果 Grammarly 无法在 Windows 10 浏览器上运行的 8 个重大修复May 05, 2023 pm 02:16 PM

如果您在Windows10或11PC上遇到语法问题，本文将帮助您解决此问题。Grammarly是最流行的打字助手之一，用于修复语法、拼写、清晰度等。它已经成为写作专业人士必不可少的一部分。但是，如果它不能正常工作，它可能是一个非常令人沮丧的体验。许多Windows用户报告说此工具在他们的计算机上运行不佳。我们做了深入的分析，找到了这个问题的原因和解决方案。为什么Grammarly无法在我的PC上运行？由于几个常见原因，PC上的Grammarly可能无法正常工作。它包括以下内

如何修复 Google Chrome 上的 Roblox 403 禁止错误May 19, 2023 pm 01:49 PM

许多Windows用户最近在尝试访问GoogleChrome浏览器中的网站URL时遇到了一个不寻常的错误，称为Roblox403禁止错误。即使在多次重新启动Chrome应用程序后，他们也无能为力。此错误可能有几个潜在原因，我们在下面概述并列出了其中一些。Chrome的浏览历史和其他缓存以及损坏的数据不稳定的互联网连接网站网址不正确从第三方来源安装的扩展在考虑了上述所有方面之后，我们提出了一些修复程序，可以帮助用户解决此问题。如果您遇到同样的问题，请查看本文中的解决方案。修复1

vue3中cookie如何使用May 12, 2023 pm 02:19 PM

前言cookie使用最多的地方想必是保存用户的账号与密码，可以避免用户每次登录时都要重新输入1.vue中cookie的安装在终端中输入命令npminstallvue-cookies--save，即可安装cookies，安装之后在main.js文件中写下以下代码import{createApp}from'vue'importVueCookiesfrom'vue-cookies'constapp=createApp(App)app.co

如何在 Google Chrome 中启用或禁用第三方 CookieApr 15, 2023 pm 02:07 PM

每个网站都通过创建cookie使用户更容易浏览他们的网页和浏览他们的网站。然而，网站创建了一些第三方cookie，使他们能够跟踪访问其他网站的用户，以便更好地了解他们，从而有助于展示广告和其他帖子。一些用户可能认为他们的数据遭到破坏或存在安全风险，而另一些用户可能认为允许这些第三方cookie跟踪他们以在浏览器上获取更多内容是很好的。所以我们在这篇文章中解释了如何在谷歌浏览器中启用或禁用第三方cookies，详细步骤如下。如何在GoogleChrome中启用第三方Cookie如果您认为要

PHP8.0中的Cookie库May 14, 2023 pm 04:51 PM

在互联网应用开发中，使用Cookie是常见的一种方式来维护用户会话状态。在PHP语言中，处理Cookie的相关功能在语言的核心库中得到了完善的支持，在最新的PHP8.0版本中，Cookie库得到了进一步的增强。一、PHP中的CookieCookie是一个小文本文件，可以存储在用户的浏览器中，它通常被用来记录用户的个性化设置、登录状态等信息。Cookie是基

php curl怎么设置cookieSep 26, 2021 am 09:27 AM

php curl设置cookie的方法：1、创建PHP示例文件；2、通过“curl_setopt”函数设置cURL传输选项；3、在CURL中传递cookie即可。

如何在ThinkPHP6中使用Cookie技术实现记住我功能Jun 20, 2023 pm 03:33 PM

随着互联网技术的不断发展，越来越多的网站需要用户登录才能使用其功能。但是每次用户访问时都需要输入账号密码显然很不方便，因此“记住我”的功能应运而生。本文将介绍如何在ThinkPHP6中采用Cookie技术实现记住我功能。一、Cookie简介Cookie是一种服务器向客户端发送的小文件，在用户访问网站时存储在用户的计算机上。这些文件包含与用户相关的信息，如登录

See all articles