这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【跨域解决方案之nginx 】

大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网js任务5，深度思考中的知识点——跨域解决方案之nginx1.背景介绍什么是跨域以及产生原因

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

什么是同源策略？

 

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1. Cookie、LocalStorage 和 IndexDB 无法读取
2.  DOM 和 Js对象无法获得
3.  AJAX 请求不能发送

常见跨域场景

2.知识剖析

跨域解决方案

1、 通过jsonp跨域

2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域资源共享（CORS）7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域

3.常见问题

如何跨域

4.解决方案

nginx反向代理解决跨域

5、编码实战

首先找到nginx.conf

自定义本地的url请求规则 ，如 则对应要nginx服务转发到 。

server

{

listen 80;

server_name www.720ui.com;

location ^~ /blog/ {

proxy_pass ;

}

}

6.拓展思考

还有什么解决方案

jsonp,利用了src属性可以跨域的特性

7.参考文献

参考一：

参考二：

 

密码: 9epr