迹忆客 EN >

当前位置:主页 > 学无止境 > 网络 >

Ajax跨域Cookie相关设置

作者:迹忆 最近更新:2022/12/04 浏览次数:

在Web编程中我们经常会遇到跨域的问题。默认情况下,浏览器是不允许跨域访问的。所以说,在这里就有一个概念:CORS(Cross-Origin Resource Sharing)跨域资源共享。

在HTML5标准出来之前,CORS是不被允许的。但是为了达到跨域访问资源的目的,出现了很多较麻烦的方式:jsonp、代理文件、地址栏hash等等。随着HTML5的出现,CORS为我们解决了一个大麻烦。

CORS的用途比较广泛,最近在做SSO的时候同样也用到了CORS。对于CORS的详细介绍我们大家可以参考阮一峰老师的《跨域资源共享CORS详解》这篇文章。在这里我们只介绍以下两种情况。

ajax跨域简单访问

要想实现跨域访问,首先我们要清楚CORS实现跨域访问最重要的一点就是设置Access-Control-Allow-Origin这个参数。

假如我有两个站点

www.onmpw.com
www.jiyibk.com

我在onmpw站点上通过ajax访问jiyibk。

$.ajax({
         url:'http://www.jiyibk.com/index.php',
         dataType:'json',
         type:'post',
         data:{id:1},
         success:function(data){
                   console.log(data);
         },
         error:function(err){
                   console.log(err);
         }
})

如果我们不做任何设置,就会出现禁止跨域访问的提示

禁止跨域错误信息

那要解决这个问题,我们需要用到http请求头中的Origin参数。

Ajax跨域Cookie相关设置

Origin这个参数代表的是来源站点。因此我们只需要在jiyibk服务端对Access-Control-Allow-Origin进行设置,其允许的网站就是请求头中的Origin选项值。

<?php
         header("Access-Control-Allow-Origin:".$_SERVER[‘HTTP_ORIGIN’]);

只需要设置服务端即可,在客户端不用进行其他的设置就可以实现跨域访问了。不过,上面的设置仅仅是可以跨域访问,对于cookie还是不能跨域设置和读取。接下来我们就来进行cookie跨域的设置。

ajax跨域cookie设置

上面我们已经实现了ajax跨域访问了,但是还是不能进行cookie的设置。要想实现跨域cookie的设置,我们还需要对CORS的另一个重要的参数Access-Control-Allow-Credentials进行设置。

和上面的设置不同的是,此项不仅仅是在服务端设置,还需要再客户端也进行设置。

客户端如下:

$.ajax({
         url:'http://www.jiyibk.com/index.php',
         xhrFields: {withCredentials: true},
         dataType:'json',
         type:'post',
         data:{id:1},
         success:function(data){
                   console.log(data);
         },
         error:function(err){
                   console.log(err);
         }
})

通过jquery的ajax设置还是比较简单的。只是加上xhrFields: {withCredentials: true},这一项客户端就可以说是设置完成了。

接下来是在jiyibk服务端:

<?php
    header("Access-Control-Allow-Origin:". $_SERVER[‘HTTP_ORIGIN’]);
    header("Access-Control-Allow-Credentials: true ");

经过以上的设置就可以进行cookie跨域设置了。

CORS对于我们开发web应用提供了很大的方便。本文只是简单介绍了ajax跨域设置cookie的问题,对于其他深层次的东西还有待于大家去探索。总之,希望本文能给大家一些帮助。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Displaying Cookie-Based Images in HTML

发布时间:2025/04/19 浏览次数:96 分类:HTML

This article will introduce a method to display images in HTML format based on cookies set in PHP. Display images based on cookies set in HTML The problem statement is that we need to display a specific image based on a cookie passed by the

AJAX calls in Node.js

发布时间:2025/04/17 浏览次数:103 分类:Node.js

Representational State Transfer is abbreviated as REST . An API or Web API (Application Programming Interface) that complies with the restrictions and limitations of the REST architectural style and allows interaction with RESTful web servi

Enabling CORS in GoLang

发布时间:2025/04/15 浏览次数:103 分类:Go

This article describes how to enable and use CORS in GoLang. Go language CORS Cross-origin resource sharing (CORS) is a process based on HTTP headers that defines the origins from which browsers are allowed to load and use resources. CORS i

PHP with Ajax

发布时间:2025/04/13 浏览次数:140 分类:PHP

We will use PHP and ajax by printing a simple sum of two numbers 2 and . Also, print a php array in JSON. 3 object We will also use PHP with ajax by getting the HTML formatted output from the number division in PHP. Printing simple addition

Which technology do you choose to implement the web chat room?

发布时间:2025/03/18 浏览次数:62 分类:NETWORK

With the rise of HTML5 Websockets, web chat applications are becoming more and more popular. Recently, I am working on a mobile web application, the core function of which is to implement web chat on the mobile phone. Of course, the functio

Implementing a group chat room using socket.io

发布时间:2025/03/18 浏览次数:68 分类:NETWORK

This article will share with you an example of using socket.io to realize the function of group chat. If you want to use socket.io, you must use nodejs to implement the server, so we need to install socket.io in nodejs Install socket.io How

Ajax cross-domain cookie related settings

发布时间:2025/03/18 浏览次数:89 分类:NETWORK

In web programming, we often encounter cross-domain issues. By default, browsers do not allow cross-domain access. Therefore, there is a concept here: CORS (Cross-Origin Resource Sharing). Before the HTML5 standard came out, CORS was not al

PHP+ajax to achieve cross-domain single sign-on

发布时间:2025/03/16 浏览次数:146 分类:NETWORK

We have previously introduced the principle of cross-domain single sign-on in "Detailed explanation of the implementation methods of three situations of SSO single sign-on" . Here we will introduce how to implement single sign-on using PHP

IE's Ajax cross-domain issue

发布时间:2025/03/16 浏览次数:191 分类:NETWORK

Ajax is widely used in web systems, but cross-domain issues are often encountered in web systems. By default, browsers prohibit Ajax cross-domain access. The IE browser has particularly strict restrictions. For browsers such as Firefox, Goo

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便