浏览器的同源策略和跨域访问

1. 什么是同源策略 

    理解跨域首先必需要了解同源策略。同源策略是浏览器上为安全性考虑实施的很是重要的安全策略。
    何谓同源:
        URL由协议、域名、端口和路径组成，若是两个URL的协议、域名和端口相同，则表示他们同源。
    同源策略:
        浏览器的同源策略，限制了来自不一样源的"document"或脚本，对当前"document"读取或设置某些属性。
        从一个域上加载的脚本不容许访问另一个域的文档属性。

 举个例子：
        好比一个恶意网站的页面经过iframe嵌入了银行的登陆页面（两者不一样源），若是没有同源限制，恶意网页上的javascript脚本就能够在用户登陆银行的时候获取用户名和密码。

    在浏览器中，<script>、<img>、<iframe>、<link>等标签均可以加载跨域资源，而不受同源限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。
    另外同源策略只对网页的HTML文档作了限制，对加载的其余静态资源如javascript、css、图片等仍然认为属于同源。

 

 

跨域请求解决方案：

一、 经过jsonp跨域
二、 document.domain + iframe跨域
三、 location.hash + iframe
四、 window.name + iframe跨域
五、 postMessage跨域
六、 跨域资源共享（CORS）
七、 nginx代理跨域
八、 nodejs中间件代理跨域
九、 WebSocket协议跨域

 

1、 经过jsonp跨域

一般为了减轻web服务器的负载，咱们把js、css，img等静态资源分离到另外一台独立域名的服务器上，在html页面中再经过相应的标签从不一样域名下加载静态资源，而被浏览器容许，基于此原理，咱们能够经过动态建立script，再请求一个带参网址实现跨域通讯。

1.）原生实现：

<script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON.stringify(res)); } </script>

服务端返回以下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})

2.）jquery ajax：

$.ajax({
    url: 'http://www.domain2.com:8080/login', type: 'get', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "onBack", // 自定义回调函数名 data: {} });

3.）vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', { params: {}, jsonp: 'onBack' }).then((res) => { console.log(res); })

后端node.js代码示例：

var querystring = require('querystring'); var http = require('http'); var server = http.createServer(); server.on('request', function(req, res) { var params = qs.parse(req.url.split('?')[1]); var fn = params.callback; // jsonp返回设置 res.writeHead(200, { 'Content-Type': 'text/javascript' }); res.write(fn + '(' + JSON.stringify(params) + ')'); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...');

jsonp缺点：只能实现get一种请求。

 

跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin便可，前端无须设置，若要带cookie请求：先后端都须要设置。

需注意的是：因为同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。若是想实现当前页cookie的写入，可参考下文：7、nginx反向代理中设置proxy_cookie_domain 和 8、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前，全部浏览器都支持该功能(IE8+：IE8/9须要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

一、 前端设置：

1.）原生ajax

// 前端设置是否带cookie xhr.withCredentials = true;

示例代码：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容 // 前端设置是否带cookie xhr.withCredentials = true; xhr.open('post', 'http://www.domain2.com:8080/login', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('user=admin'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } };

2.）jQuery ajax

$.ajax({
    ...
   xhrFields: {
       withCredentials: true // 前端设置是否带cookie    },    crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie ... });

3.）vue框架
在vue-resource封装的ajax组件中加入如下代码：

Vue.http.options.credentials = true

二、 服务端设置：

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

1.）Java后台：

/* * 导入包：import javax.servlet.http.HttpServletResponse; * 接口参数中定义：HttpServletResponse response */ response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 如有端口需写全（协议+域名+端口） response.setHeader("Access-Control-Allow-Credentials", "true");

2.）Nodejs后台示例：

 

var http = require('http'); var server = http.createServer(); var qs = require('querystring'); server.on('request', function(req, res) { var postData = ''; // 数据块接收中 req.addListener('data', function(chunk) { postData += chunk; }); // 数据接收完毕 req.addListener('end', function() { postData = qs.parse(postData); // 跨域后台设置 res.writeHead(200, { 'Access-Control-Allow-Credentials': 'true', // 后端容许发送Cookie 'Access-Control-Allow-Origin': 'http://www.domain1.com', // 容许访问的域（协议+域名+端口） 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本没法读取cookie }); res.write(JSON.stringify(postData)); res.end();

});
});

server.listen('8080'); console.log('Server is running at port 8080...');