ajax cors跨域_jquery跨域

ajax cors跨域_jquery跨域两种跨域方法在Javascript中跨域访问是比较常见的事情就像现在比较流行写单页应用,而单页应用在访问API的时候就会有跨域的问题要解决跨域的问题,其实也并不复杂,有两种方案可以选择Jsonp跨域Jsonp的实现原理就是:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON数据形式作为参数传递,完成回调。CORS(跨域资源共享)跨源资源共享标准通过新增一系列HTTP头…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

两种跨域方法

在 Javascript 中跨域访问是比较常见的事情

就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题

要解决跨域的问题,其实也并不复杂,有两种方案可以选择

Jsonp 跨域

Jsonp 的实现原理就是:创建一个回调函数,然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递,完成回调。

CORS(跨域资源共享)

跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。

对于 GET 以外的 HTTP 方法,或者搭配某些 MIME 类型的 POST 请求,如:PUT 或者 DELETE 等,

以及如果自定义了请求头的话,浏览器必须先以 OPTIONS 请求方式发送一个预请求 (Preflight Request),

从而获知服务器端对跨域请求所支持的 HTTP 方法,确认了服务器端允许该跨域请求的情况下,以实际的 HTTP 请求方法发送真正的请求。

跨域方法的选择

Jsonp 跨域方式,兼容性更好,如果需要兼容旧浏览器的话,可以考虑使用,但是这种方法不支持自定义请求头 (Request Headers)

不过,对于访问 API ,通常都是需要验证 Token 的,而 Token 都是需要放到请求头上的

所以对于正在写的一个单页应用,我选择了 CORS

CORS 跨域方式,兼容性其实也不差,至少可以兼容到 IE8 IE9,

兼容 IE8 IE9,需要使用 XDomainRequest 代替 XMLHttpRequests

这个是完全可以接受的

跨域的具体应用

使用 CORS,其实主要都是服务器端的配置,都是设置一系列的响应头 (Response Headers)

“`

Access-Control-Allow-Origin: http://www.YOURDOMAIN.com // 设置允许请求的域名,多个域名以逗号分隔

Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS // 设置允许请求的方法,多个方法以逗号分隔

Access-Control-Allow-Headers: Authorization // 设置允许请求自定义的请求头字段,多个字段以逗号分隔

Access-Control-Allow-Credentials: true // 设置是否允许发送 Cookies

“`

服务端以 PHP 为例:

“`

header(‘Access-Control-Allow-Origin: http://www.YOURDOMAIN.com’);

header(‘Access-Control-Allow-Credentials: true’); //可选

header(‘Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS’);

header(‘Access-Control-Allow-Headers: Authorization’);

// 判断如果是 OPTIONS 请求,直接退出即可

if ($_SERVER[‘REQUEST_METHOD’] == ‘OPTIONS’) {

exit;

}

echo json_encode(array(‘status’ => ‘1’, ‘data’ => ”));

?>

“`

Javascript 代码直接使用 Ajax 即可:

“`

$.ajax({

url: aURL,

type: aMethod,

data: aParams,

dataType: ‘json’,

timeout: 1000 * 120,

beforeSend: function (xhr) {

var token = $.cookie(‘token’);

if (token) {

xhr.setRequestHeader(‘Authorization’, ‘Bearer ‘ + token);

}

},

success: function (response) {

if (response.code == 200) {

typeof aSuccess == ‘function’ && aSuccess(response.data);

} else {

typeof aError == ‘function’ && aError(response.message);

}

},

error: function(xhr, type){

typeof aError == ‘function’ && aError(xhr.status + ‘ ‘ + xhr.statusText);

}

});

“`

参考链接

Ajax跨域CORS

在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin.Methods.Headers.Credentials 1.Origin 当浏览器用Ajax跨域请求的时候,会带上一个 …

【JS】AJAX跨域-JSONP解决方案(一)

AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 …

ajax跨域问题解决方案

今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 …

ajax跨域问题解决方案(jsonp,cors)

跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 …

ajax跨域请求解决方案 CORS和JSONP

什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 …

PHP下ajax跨域的解决方案之CORS

由于安全的限制(同源策略,javascript只能访问同域名下的内容),如果需要进行跨域操作,那就免不了要进行跨域.   CORS(跨域资源共享,Cross-Origin Resource Shari …

ajax跨域请求解决方案

大家好,今天我们学习了js的跨域请求的解决方案,由于JS中存在同源策略,当请求不同协议名,不同端口号.不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理! 方案一.后台PHP进行 …

Ajax跨域访问解决方案

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 当使用ajax访问远程服务器时,请求失败,浏 …

随机推荐

angularJ之$filter过滤器

1 内置filter 9个 2 自定义filter

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/172555.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 服务器如何存储图片(图片服务器搭建方案)

    参考:https://www.zhihu.com/question/20518854我们的ext4/dev/sda37299235847亿多个inode了。数据库直接存图片本身是SB的做法。比较好的方法是存图片md5,然后通过类似md52url获取图片的地址。至于图片存放,建议打散,打3级或5级。类似a/de/df/adedf***************.jpg…

  • Python 正则表达式详解(建议收藏!)[通俗易懂]

    Python 正则表达式详解(建议收藏!)[通俗易懂]目录匹配字符串单字符匹配.匹配任意一个字符\d匹配单个数字\D匹配非数字的\s匹配特殊字符,如空白,空格,tab等\S匹配非空白\w匹配单词、字符,如大小写字母,数字,_下划线\W匹配非单词字符[]匹配[]中列举的字符正则表达式是对字符串提取的一套规则,我们把这个规则用正则里面的特定语法表达出来,去匹配满足这个规则的字符串。正则表达式具有通用型,不仅python里面可以用,其他的语言也一样适用。python中re模块提供了正则表达…

  • win7显示器亮度怎么调_虚拟机外接显示器

    win7显示器亮度怎么调_虚拟机外接显示器很久没有继续研究wddmhook了,最后一次研究还在3年前,不得不说虽然应用的少,但是wddmhook却是很有技术含量的一项技术,而且实用性很高,我们除了做虚拟显示器还能做很多的东西,比如高效的截屏(因为直接从驱动层面截屏,所以效率和实现效果秒杀mirrordriver和DXGI)、视频重定向(视频硬件加速的时候可以直接获取原始码流)、修改原始的显示器厂商信息、修改显示器支持分辨率,等等骚操作wddmhook都可以实现。去年,深圳某硬件公司找到我,他们正在做usb转HDMI或者USB转VGA的硬件

  • C语言——五子棋人机对战

    C语言——五子棋人机对战         先说下背景吧,写下这篇博客时,博主大一在读,C语言初学者,寒假无事,便计划写几个由C语言实现的小游戏以提升编程能力。在这篇博客里分享的是可人机对战的五子棋游戏。         棋类游戏要实现初级的机器智能,其核心思想便是:感知(SENSE)->思考(THINK)->行动(ACT)。所以,本文将尽量以这个顺序介绍实现过程。(1)前期准备:    此程序中,机器…

  • [总结]视音频编解码技术零基础学习方法

    [总结]视音频编解码技术零基础学习方法一直想把视音频编解码技术做一个简单的总结,可是苦于时间不充裕,一直没能完成。今天有着很大的空闲,终于可以总结一个有关视音频技术的入门教程,可以方便更多的人学习从零开始学习视音频技术。需要注意的是,本文所说的视音频技术,指的是理论层面的视音频技术,并不涉及到编程相关的东西。

  • Idea快捷键大全(Windows)

    Idea快捷键大全(Windows)Ctrl快捷键 介绍 Ctrl+F 在当前文件进行文本查找(必备) Ctrl+R 在当前文件进行文本替换(必备) Ctrl+Z 撤销(必备) Ctrl+Y 删除光标所在行或删除选中的行(必备) Ctrl+X 剪切光标所在行或剪切选择内容 Ctrl+C 复制光标所在行或复制选择内容 …

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号