前言

前几天，有个朋友问我跨域的问题，寻思着找篇文章给他理解。找了半天都没有直中要害，个人认为都是理解的模棱两可，所以花时间把自己的对ajax跨域的理解写下来。

什么是跨域？

假设我访问a 站点，在a站点得到一个页面，在a 站点的这个页面想去访问b 站点的资源，这个是就会产生一个跨域的效果。由于浏览器是有安全限制的，所以a 站点无法访问到b站点的资源。

比如我现在访问 www.1.com 获取到一个页面.通过这个页面去访问www.2.com获取资源。就会产生跨域。

问题展现

接口我用的是聚合数据，有接口调用次数限制，如若接口调用有问题，请自行申请接口。

1、创建一个ajaxDemo_1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>

<body>
    这是一个有跨域问题的页面
    <script src="./jquery.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "get",
            cache: false,
            url: 'http://apis.juhe.cn/oil/region?key=1b9411b68adda384780872fabcafc16d&city=%e5%8c%97%e4%ba%ac',
            dataType: "json",
            success: function(result) {
                console.log(JSON.stringify(result));
            },
            error: function(err) {
                console.log('err10: ');
                console.log(err);
            }
        });
    </script>
</body>

</html>

2、将ajaxDemo_1.html放到本地node.js服务器上运行

由于跨域问题产生的错误

ajax底层请求类型为XMLHttpRequest

如何解决？

1、jsonp（只能解决get请求跨域问题）

创建一个ajaxDemo_2.html 发起get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxDemo_2</title>
</head>
<body>
这是一个用jsonp解决get请求跨域问题的页面
<script src="./jquery.min.js"></script>
<script type="text/javascript">
    $.ajax({
        type: "get",
        cache: false,
        url: 'http://apis.juhe.cn/oil/region?key=1b9411b68adda384780872fabcafc16d&city=%e8%a1%a1%e9%98%b3',
        dataType: "jsonp",
        success: function(result) {
            console.log(JSON.stringify(result));
        },
        error: function(err) {
            console.log('err10: ');
            console.log(err);
        }
    });
</script>
</body>
</html>

运行后没有跨域问题，可以正常请求到数据

ajax底层请求类型为script

ajax使用script元素发送jsonp请求

使用<script>元素进行ajax传输的原因：
　　1、它不受同源策略的影响，因此可以使用它们从其他服务器请求数据。
　　2、包含JSON编码数据的响应体会自动解码（即执行）。

结论：当通过<script>元素调用数据时，响应内容必须用js函数名和圆括号包裹起来，而不是发送一段json数据。而且通过<script>元素只能加载get请求而不能加载post请求

2、cors（跨域资源共享 Cross-Origin Resource Sharing）

通过cors使跨域问题在get请求和post请求都可以解决

2.1、cors原理

CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可

2.2CORS浏览器支持情况

CORS浏览器支持情况图解

CORS浏览器支持情况描述

　　喜闻乐见、普大喜奔的支持情况，尤其是在移动终端上，除了opera Mini；
　　PC上的现代浏览器都能友好的支持，除了IE9-，不过前端工程师对这种情况早应该习惯了...

2.3 应用

假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。
　　利用 CORS，http://www.test2.com 只需添加一个标头，就可以允许来自 http://www.test1.com 的请求，下图是我在服务器返回中的 header() 设置，“＊”号表示允许任何域向我们的服务端提交请求：