两种跨域方法

在 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