跨域问题的三个解决方法（1）

本文实践了三种方法去解决从a页面通过跨域ajax请求b页面的数据，三种方法分别：

jsonp
服务器代理
在服务器端设置cors

1. 跨域 cross-domain

什么是跨域？顾名思义可以理解为：超越了划定的区域。
具体来说，当你在一个页面中去请求另一个页面的数据时，这个请求就可能“越界”了。
如：在A页面中的，发动ajax中去请求B页面的数据。如果A页面和B页面不是同源的，则说明这个请求是跨域的。

1.1 同源与不同源

所谓同源是指:域名，协议，端口均相同。

1.1.1 同源的：

A页面：http://www.aaa.com/index.html

B页面: http://www.aaa.com/server.php

从A页面请求B页面，不存在跨域

关于同源问题，可以在这里研读阮老师的博客。

跨域的错误提示

如果你的请求是跨域时，你可能会看到如下类型的错误：

chrome浏览器给出的跨域错误.png

注意关键字：Access-control-allow-origin

基本的代码示例

下面的代码运行需要 node 和 express 支持。
相关文件目录如下：

示例代码目录结构.png

port3000.js

代码如下：

//port3000.js 文件
const express = require("express");
const https = require("https");
const path = require("path");

const app = express();
app.use(express.static(path.join(__dirname, "/public")));

app.get("/",(req,res)=>{
    res.sendFile(__dirname +"/3000.html"); //直接引入3000.html文件
});
app.listen(3000,()=>{
    console.log("http server is listening in port 3000...")
})

上面的代码在node环境下运行之后，就会开启express服务，监听3000端口。具体的功能是：在浏览器中访问:localhost:3000时，就会直接显示3000.html的内容。

3000.html

下面的代码是一个静态的html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.11.0.js"></script>
</head>
<body>
    <p>通过node port3000.js 可以打开这个页面。</p>
    <p> 讨论ajax跨域</p>
    <button id="btn3000">ajax请求3000端口</button>
    <button id="btn4000">ajax请求4000端口</button>
    <button id="btn4000jsonp">ajax请求4000端口-jsonp</button>
    <button id="btnzhihu">ajax直接请求zhihu</button>
    <button id="btnzhihu_server">服务器代理请求zhihu</button>
    <hr>
    <div id="result">
    </div>
</body>
</html>

我们引入jquery-1.11.0.js文件是用了使用其中的ajax方法。

创建好上面两个文件后，我们就可以在当前目录下，通过node命令去运行3000.js文件了。

类似于如下：

运行port3000.js

上面只是启动了服务，接下来还需要通过浏览器去访问这个服务：

在浏览器中访问

你看到的页面就是3000.html文件。

data.json

这个json文件，用来模拟数据源。

{
    "name":"jake",
    "age":30
}

同源请求数据

给按钮"ajax请求3000端口"添加点击事件。

$("#btn3000").on("click",function(){
            console.info("btn3000");
            $.getJSON("/getData",function(d){
                console.log(d)
                $("#result").html(JSON.stringify(d));
            })
        });

注意: getJSON是$.ajax 的一个快捷写法，用来请求json数据。它的第一个参数就是要请求的地址。也就相当于localhost:3000/getData。此时，直接点击按钮肯定会报错的，因为你在express中没有设置这个路由。

所以接下来，你还需要在port3000.js中去添加一段代码：

const app = express();
app.use(express.static(path.join(__dirname, "/public")));
app.get("/",(req,res)=>{
    res.sendFile(__dirname +"/3000.html"); //直接引入3000.html文件
});
 app.get("/getData",(req,res)=>{
    let d = require("./data.json");
    res.json(d); // 直接输出json
}); 
app.listen(3000,()=>{
    console.log("http server is listening in port 3000...")
})

上面的app.get("/getData")这段就是设置了一个路由，其响应就是直接访问data.json文件，并以json的格式输出。

由于你修改了port3000.js，所以你需要重新运行 node port3000命令。

刷新浏览器，点击按钮"ajax请求3000端口" ，你会看到类似如下效果：

同源访问

好的，以上是同源的，没什么难度。下面进入正题。

跨域访问

按上面所述跨域有很多种表现，下面模拟一下“端口号不同”的跨域。

得益于express框架，我们可以快速地在本机上搭建另一个端口号的服务。创建port4000.js文件。具体代码如下：

const express = require("express");
const path = require("path");
const app = express();

app.get("/",(req,res)=>{
    res.sendFile(__dirname +"/4000.html");
});
app.get("/getData",(req,res)=>{ //提供对localhost:4000/getData的响应
    let d = require("./data.json");
    res.json(d); // 直接输出json
});
app.listen(4000,()=>{
    console.log("http server is listening in port 4000...")
})

它需要有一个4000.html(这个文件只是打酱油的)
4000.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>通过node port4000.js 可以打开这个页面。</p>
</body>
</html>

ok，在当前目录下，运行node port4000.js

启动服务

新开一个浏览器窗口，访问4000端口：

在浏览器中访问4000端口

在此为止，我们已经在本机上通过express服务模拟了两个域，分别是"localhost:3000"和"localhost:4000"，它们分别由port3000.js和port4000.js支持。并且你可以分别通过localhost:3000/getData和localhost:4000/getData去显示data.json中的数据。

下面，我们要实现的功能是：在localhost:3000这个域中通过ajax去访问localhost:4000/getData这个接口。

在3000.html中编写代码，给"ajax请求4000端口"添加点击事件响应

$("#btn4000").on("click",function(){
    console.info("btn4000");
    $.ajax({
        type:"GET",
        url:"http://localhost:4000/getData",
        dataType:"json",
        success:function(d){
            console.log(d)
            $("#result").html(JSON.stringify(d));
        }
    });
})

上面的$.ajax写法等价于$.json，就是换个写法而已。
点击这个按钮，在浏览器的控制台下，你会看到如下的错误：

跨域访问错误

这就是我们说的跨域的错误。

解决方法一：jsonp

script标签可以用来引入外部的js文件，格式是：

<script src="地址"></script>

例如：

<script src="jquery.js"></script>

当然，这个地址是一个网络的地址也是ok的，如

<script src ="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

并且，它不需要遵守同源策略。这僦是核心的原理。

下面开个脑洞。
如果你在3000.html中加这一句：

<script src ="http://localhost:4000/getData"><script>

会有什么后果呢？
显然，它这个页面就会去请求http://localhost:4000/getData这个路径，并且这一步不需要遵守同源策略的。这实际上就已经实现了跨域访问的一大半了。接下来，我们只需要保证从http://localhost:4000/getData得到的内容是一段标准的js代码就可以了。

我们可以进一步在port4000.js中设置如下路由响应：

app.get("/getData",(req,res)=>{
    res.end("alert('fyf')"); // alert('fyfy')就是一段js代码啦。
});

到此为止，你打开http://localhost:3000时，就可以看到一个弹出框了。

就上就是jsonp的原理。

下面我们用它来解决实际的问题：如何从http://localhost:4000/getData得到一些数据，并进行操作？

两个地方改进：

修改port4000.js中设置如下路由响应：

app.get("/getData",(req,res)=>{
  let d = require("./data.json");//在服务器端获取数据
  res.end(doSomething+"("+JSON.stringify(d)+")");//拼接js 函数
 //结果是:doSomething(JSON.stringify(d))
});

2.在3000.html中添加doSomething函数。

doSomething(d){
  //其它操作
  console.info(d)；
};//新加的
<script src="http://localhost:4000/getData"><script>

再次重启node port4000.js，并刷新localhost:3000，你就可以直接在控制台看见结果了。

image.png

jsonp总结：
（1）在script的src中设置请求的地址，并设置一个用于操作数据的函数f。
（2）在服务器设置这个请求的响应是一个标准的js函数调用格式，保证两点：第一，函数名是就f；第二，函数的参数是要返回去的数据。

拓展：点击一次按钮才去实现jsonp

function addScriptTag(src) { 
 var script = document.createElement('script');     
 script.setAttribute("type","text/javascript");
 script.src = src; 
 document.body.appendChild(script);//动态添加script标签
}
按钮.onclick= function () { 
   addScriptTag("http://localhost:4000/getData");
}
function doSomething(d) { console.log(d);};

搞定！

ok，以上你已经实现了jsonp了。下面我们再来看看它的定义

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
from 百度百科

其实，你发现没有它与ajax真的一点关系也没有。

在实际的开发中，我们的使用方法会很简单，因为第三方库（如jquery）已经帮助我们封装好了这样操作，我们直接调用即可。

接着上面的例子,给3000.html中的按钮添加点击事件：

  $("#btn4000jsonp").on("click",function(){
    console.info("btn4000jsonp");
    $.ajax({
        type:"GET",
        url:"http://localhost:4000/getDataJsonp",
        dataType:"jsonp",//这是重点
        success:function(d){
            console.log(d)
            $("#result").html(JSON.stringify(d));
        }
    });
})

在port4000.js中，添加一个路由处理：

app.get("/getDataJsonp",(req,res)=>{
    let d = require("./data.json");
    res.jsonp(d); // 不是json，是jsonp
});

重启port4000.js，刷新localhost:3000，点击“ajax请求4000端口-jsonp” 查看效果。

其它两种解决方法，明天继续。
（完）

最后编辑于：2017.12.11 03:09:53

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350