跨域指的是什么?
浏览器为了防止一些XSS、CSRF攻击,做了一层安全防护,这层防护就是同源策略。浏览器只支持同源的访问。所谓同源就是指“协议|域名|端口号”三者必须完全相同,即使是同一IP,不同域名也不行,二级域名也不行。
不受同源限制的:
- 页面中的连接,重定向以及表单提交不受同源策略限制
跨域资源引入是可以的,但js不能读写加载的内容。
<script src=""></script>
<img>
<link>
<iframe>
跨域就是受同源策略的影响,操作另一个源的资源
解决跨域问题
跨域请求的响应一般会被浏览器所拦截,注意,是被响应被浏览器拦截,请求已被服务端处理,响应也成功到达客户端了,但就是获取不到。
1 前端解决跨域
- 动态创建script
- document.domain + iframe (只有在主域相同的时候才能使用该方法)
- location.hash + iframe
- window.name + iframe
- postMessage(HTML5中的XMLHttpRequest Level 2中的API)
配合使用 iframe,需要兼容 IE6、7、8、9
- CORS
它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。
- JSONP
Ajax 请求会受到同源策略限制,而 script 标签请求不会
- web sockets
同源策略对web sockets不适用
2 后端解决跨域
- CORS
CORS 其实是 W3C 的一个标准,全称是跨域资源共享。它需要浏览器和服务器的共同支持,具体来说,非 IE 和 IE10 以上支持CORS,服务器需要附加特定的响应头。
3 使用代理解决跨域问题
服务端与服务端的交互是不受同源策略限制的
使用代理去避开跨域请求,需要修改 nginx、apache 等的配置
Nginx Proxy
Nginx 是一种高性能的反向代理服务器,可以用来轻松解决跨域问题。
反向代理拿到客户端的请求,将请求转发给其他的服务器,主要的场景是维持服务器集群的负载均衡,换句话说,反向代理帮其它的服务器拿到请求,然后选择一个合适的服务器,将请求转交给它。
server {
listen 80;
server_name client.com;
location /api {
proxy_pass server.com;
}
}
Nginx 相当于起了一个跳板机,这个跳板机的域名也是client.com
,让客户端首先访问 client.com/api
,这当然没有跨域,然后 Nginx 服务器作为反向代理,将请求转发给server.com
,当响应返回时又将响应给到客户端,这就完成整个跨域请求的过程。