跨域请求数据

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

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
    26
    27
    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
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 中加入参数设置项

参考