文章目录
  1. 1. 1.jsonp 方法
    1. 1.0.1. 操作步骤:
    2. 1.0.2. 在 angular 使用 jsonp
    3. 1.0.3. 调用
  2. 1.1. 2.CORS 跨域
    1. 1.1.1. 1.Access-Control-Allow-Origin
    2. 1.1.2. 2.Access-Control-Allow-Credentials
    3. 1.1.3. 3.Access-Control-Expose-Headers
  3. 1.2. 实现一个使用 CORS 的跨域
    1. 1.2.1. 参考

何为跨域:协议,网址,端口任一不一致

1.jsonp 方法

只是基于 get 请求的跨域,post 不支持
利用 script 的 src 属性天然可跨域的特性进行传递数据

操作步骤:

1.在全局准备一个函数,用来接收数据

1
function fnname() {}

2.在请求的时候将准备好的函数的名字传递给后端,callback 后面的名字

1
<script src = "http://www.example.com?callback = fnname">

3.后端返回函数的调用,并且将数据通过传递参数的形式传递过来

1
fnname({ name: "zhangsan", age: 18 });

4.前端得到,处理数据

1
2
3
function fnname(data) {
console.log(data);
}

在 angular 使用 jsonp

跨域的时候会报错,这里需要设置一个白名单,因为 jsonp 的跨域是敏感的,需要将 url 加入到可信任的白名单里面

  • 自己封装 jsonp 请求方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function myJsonp(url, data, callback) {
var fnName =
"myJsonp_" +
Math.random()
.toString()
.replace(".", "");

window[fnName] = callback;

var querystring = "";

for (var attr in data) {
querystring += attr + "=" + data[attr] + "&";
}

var script = document.createElement("script");

script.src = url + "?" + querystring + "callback=" + fnName;

script.onload = function() {
document.body.removeChild(script);
};

document.body.appendChild(script);
}

调用

1
2
3
4
5
6
7
8
9
10
myJsonp(
"https://api.douban.com/v2/movie/in_theaters",
{
start: 1,
count: 10
},
function(res) {
console.log(res);
}
);

2.CORS 跨域

支持 post 的跨域,前后端协作

  • 先决条件 只要服务器实现了CORS接口,就可以跨源通信。

  • 请求类型 简单请求

    (1) 请求方法是以下三种方法之一:

    HEAD GET POST

    (2)HTTP 的头信息不超出以下几种字段:

    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type:只限于以下三个值
    application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 凡是不同时满足上面两个条件,就属于非简单请求。浏览器对这两种请求的处理,是不一样的

  • 本文只讨论了简单请求的实现步骤

  • 请求头设置

1
2
3
4
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息中,有三个与 Cros 请求相关的字段,都以Access-Control-开头.

1.Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时 Origin 字段的值,要么是一个*,表示接受任意域名的请求。

2.Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值,表示是否允许发送 Cookie。默认情况下,Cookie 不包括在 CORS 请求之中。设为 true,即表示服务器明确许可,Cookie 可以包含在请求中,一起发给服务器。这个值也只能设为 true,如果服务器不要浏览器发送 Cookie,删除该字段即可。

3.Access-Control-Expose-Headers

该字段可选。CORS 请求时,XMLHttpRequest 对象的 getResponseHeader()方法只能拿到 6 个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在 Access-Control-Expose-Headers 里面指定。上面的例子指定,getResponseHeader(‘FooBar’)可以返回 FooBar 字段的值。

实现一个使用 CORS 的跨域

如果直接使用 ajax 访问,会有以下错误

1
XMLHttpRequest cannot load http://www.server.com/server.PHP. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access.

本地设置目录情况如下

  1. 域名 api.study.com
    • 文件 03-cors.php
  2. 域名 study.com
    • 文件 cors.html
      • jquery.js

前端

1
2
3
4
5
6
7
8
9
$.ajax({
type: "post",
url: "http://api.study.com/03-cors.php",
data: "data",
success: function (response) {
alert(response)
}
});
</script>

php

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php

header("Content-Type:text/html;charset=UTF-8");

// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

echo 'hellow world ,cors';
?>

总结:在实现 CORS 跨域获取数据的过程中关键在于后端的设置

在被请求的 Response header 中加入参数设置项

参考

文章目录
  1. 1. 1.jsonp 方法
    1. 1.0.1. 操作步骤:
    2. 1.0.2. 在 angular 使用 jsonp
    3. 1.0.3. 调用
  2. 1.1. 2.CORS 跨域
    1. 1.1.1. 1.Access-Control-Allow-Origin
    2. 1.1.2. 2.Access-Control-Allow-Credentials
    3. 1.1.3. 3.Access-Control-Expose-Headers
  3. 1.2. 实现一个使用 CORS 的跨域
    1. 1.2.1. 参考