同源和跨域

同源和跨域

同源策略的定义

同源策略： 浏览器自带的一种安全策略，他是指协议、域名、 端口 三个都相同的才能互相访问，否则浏览器禁止页面加载或执行与自身不同域的脚本。

举例：

http://www.1111.com:10	该 url 与下列的 url 比较
http://www.1111.com:10/index.html	同源（协议、域名、端口都相同）
http://www.1111.com:20	不同源（端口不同）
https://www.1111.com:10	不同源（协议不同）
http://www.2222.com:10	不同源（域名不同）

为什么浏览器会有同源策略？

如果没有同源策略，别人就可以轻松的获取我们网站的 cookie 信息， 或是对网页进行DOM操作，这非常危险。 cookie 信息里面存在着 sessionID ，这是与服务端的 session 会话的重要凭证，可能会造成数据被盗取等后果。

实现不同域的脚本文件访问

实现不同域的脚本文件访问的方法有很多种，以下举几个例子：

1.通过 **html** 几个特殊的标签进行访问
2.通过 **jsonp** 来实现跨域请求
3.通过 **CORS**（跨域资源共享）实现跨域请求
4.通过代理实现跨域请求（例如nginx 、node中间件）

1.通过html几个特殊的标签进行访问
其实在 html 里有几个标签是存在 src 属性的，例如

<script src="https://www.2222.com:10"></script>

2.通过 jsonp 来实现跨域请求

需要跨域请求数据时

<script src="http://www.example.com:5000/data.js?callback=showDate"></script> //在script标签的src属性后面，拼接上一个 callback=回调函数名
<script>
	//会在跨域请求后，调用该函数
    function showDate(data) {
        console.log(data)
    }
</script>

3.通过 CORS（跨域资源共享）实现跨域请求

我们需要向 http://www.1111.com:10/ 请求它下面的 data.js 脚本文件， 我们就只需要服务端给相应头设置一下属性即可，即可完成无论谁跨域请求该域下的 data.js 。

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:POST,GET,OPTIONS
Access-Control-Allow-Headers:Origin,x-requested-with,content-type,Accept

4.通过代理实现跨域请求
同源策略是浏览器自带的，那么我们如果要避免同源策略进行跨域请求，我们可以通过代理服务器的方式进行请求，例如我们请求一个与自身不同域的脚本文件，那么我们可以先请求与自身同域的一个 url ，代理服务器会将我们的url跳转到设定的不同源的url去， 最后返回由代理服务器请求到的脚本文件。我们用一个node的中间件来举例说明一下：

//引入 express 框架
const express = require('express');
//引入 代理中间件
const { createProxyMiddleware } = require('http-proxy-middleware');
//创建服务实例
const app = express();

// 使用一下代理中间件，第一个参数为我们需要代理的 url
//                   第二个参数为跳转的 url
app.use('/api', createProxyMiddleware({ target: 'http://www.1111.com:10', changeOrigin: true }));

//监听5000端口
app.listen(10);

按照以上配置完以后， 我们请求 http://localhost:5000/api/data.js 时， 代理服务器就会自动跳转到 http://www.1111.com:10/data.js ， 这样的话我们就完成跨域请求， 并且浏览器也不会报错。