跨域

2017-10-29 本文已影响85人靳晓阳s

js 跨域

js 同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

一个源的定义

如果协议，端口和域名对于两个页面是相同的，那两个页面具有相同的源。

下标给出相对http::/store.company.com/dir.page.html同源检测的示例：

url	结果	原因
http://store.company.com/dir2/other.html	成功	dir2/other.html
http://store.company.com/dir/inner/another.html	成功	dir/inner/another.html
https://store.company.com/secure.html	失败	不同的协议
http://store.company.com:81/dir/etc.html	失败	不同的端口
http://news.company.com/dir/other.html	失败	不同的域名

同源策略所带来的问题

这个时候如果你在js里做请求会报如下错误：

XMLHttpRequest cannot load http:www.xxx.com,No 'Access-Control-Allow-Origin'
header is present on the requested resource.Origin 'http://www.xxx.com' is
therefore not allowed access.

上述错误就是说，你这个请求的不能成功加载,就是跨域请求带来的问题。

跨域请求

出现跨域请求的两种情况：

前后台分离
调用外部的接口

请求转发

在所有的请求之上套一层nodejs，简单来说，就是所有的请求通过nodejs转发进来，这样的话根本不存在跨域的问题。适用
于前后台分离的项目。后端只需要提供接口即可，前台增加了很多工作量。

设置响应头

Access-Control-Allow-Origin: *  #允许任意域名访问
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, HEAD, OPTIONS

这样就可以让服务端支持跨域

jsonp

jsonp，需要服务器端配合返回回掉。我不喜欢这种方式，通用性太差，并且只能支持get请求。

--EOF--

跨域