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)


相关推荐

  • mysql 远程连接2003「建议收藏」

    远程环境:阿里云linux,以下可依次进行。知道可以远程连接把大象关进冰箱一共分四步打开ssh一、修改配置1、打开mysql配置文件:vimetc/my.cnf2、找到mysqld下面的bind-address如果你的bind-address=localhost,那么请讲它改为0.0.0.0代表允许任何ip访问二、打开端口1、打开端口命令:iptables-…

  • iPhone屏幕分辨率「建议收藏」

    iPhone屏幕分辨率https://www.jianshu.com/p/41a8ccdf91ed①逻辑分辨率以point(pt)为单位,物理分辨率以pixel(px)为单位。②到了iPhone4开始,苹果引入了Retina屏幕(视网膜屏)。在一定物理单位内可以显示2倍的像素。iPhone4的屏幕物理尺寸还是3.5寸,分辨率为640×960,提升了4倍③因为逻辑分辨率和物理分辨率…

  • pycharm怎么装第三方库jieba_pycharm安装配置教程

    pycharm怎么装第三方库jieba_pycharm安装配置教程一、测试环境测试机型:window10pycharm版本:2020.1.1专业版二、安装步骤1.打开pycharm,点击最上方菜单项中的File,并找到Setings如图:2.点击Setings,在Project中找到自己的项目(1),随后右边的显示框中会显示如图页面,点击ProjectInterpreter(2):3.点击之后就会出现如下图页面,中间表格中的Package表示你已经添加的包,Version表示当前版本,latestversion表示最新的版本。添加新.

  • 可以直接拿来用的常见Query代码片段

    可以直接拿来用的常见Query代码片段

  • HashMap扩容机制

    HashMap扩容机制想要了解HashMap的扩容机制你要有这两个问题1.什么时候才需要扩容2.HashMap的扩容是什么1.什么时候才需要扩容当HashMap中的元素个数超过数组大小(数组长度)*loadFactor(负载因子)时,就会进行数组扩容,loadFactor的默认值(DEFAULT_LOAD_FACTOR)是0.75,这是一个折中的取值。也就是说,默认情况下,数组大小为16,那么当HashMap中的元素个数超过16×0.75=12(这个值就是阈值或者边界值threshold值)的时候,就把数组的大小扩展

  • java 判断对象是否为空的工具类_如何判断java对象是否为空「建议收藏」

    java 判断对象是否为空的工具类_如何判断java对象是否为空「建议收藏」首先来看一下工具StringUtils的判断方法:一种是org.apache.commons.lang3包下的;另一种是org.springframework.util包下的。这两种StringUtils工具类判断对象是否为空是有差距的:StringUtils.isEmpty(CharSequencecs);//org.apache.commons.lang3包下的StringUtils类,判…

发表回复

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

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