跨域与Nginx总结

跨源资源共享CORS是一种机制他使浏览器可以访问由其他域提供的Web资源。通常浏览器会使用同源策略来限制从脚本中发出的HTTP请求。例如如果一个网站的资源位于https://haha.com那么它就不能发出对https://xixi.com的请求除非xixi.com允许跨域请求 。

CORS允许服务器告诉浏览器它是否允许特定的跨域请求。这通常是通过在响应中发送一个Access-Control-Allow-Origin头来实现的。例如假设xixi.com允许来自haha.com的跨域请求它可以在响应头中发送

Access-Control-Allow-Origin:https://haha.com

如果浏览器收到这个头他就允许来自haha.com的脚本访问服务器的响应。

注意haha.com不是不能够访问xixi.com而是xixi.com不接收来自haha.com的访问

CROS还允许服务器限制哪些HTTP方法可以跨域使用。例如如果服务器只想允许来自haha.com的GET请求它可以发送一下头

Access-Control-Allow-Origin: https://haha.com

Access-Control-Allow-Methods: GET

CORS还允许服务器指定那些哪些请求头可以跨域使用。例如如果服务器希望来自haha.com访问响应头X-Custom-Header,它可以发送以下头

Access-Control-Allow-Origin: https://haha.com

Access-Control-Expose-Headers: X-Custom-Header

CORS还支持预请求preflight。当浏览器发出一个跨域请求时他会先发出一个预请求询问服务器是否允许这个请求。这通常是一个OPTIONS请求它包含一个Access-Control-Request-Method头表示浏览器想要发出实际请求的方法。例如

OPTIONS /resource HTTP/1.1

Origin: https://haha.com

Access-Control-Request-Method: POST

如果服务器允许这个请求他会发送一个状态码为200的响应并在响应中发送Access-Control-Request-Method头表示允许的方法列表。例如

HTTP/1.1 200 OK

Access-Control-Allow-Methods: POST, GET, OPTIONS

服务器收到这个响应后就会发出实际的请求。

CORS通信是在浏览器和服务器之间进行的对于开发者来说使用CORS通信并不复杂。咋发出跨域请求时浏览器会自动处理预请求和跨域头。在服务端只在服务器端只需要在响应中发送允许跨域的头即可。例如在cors.js中可以使用以下代码来允许所有跨域请求

同源限制

同源限制是一种安全机制由Web浏览器实现旨在防止网页向不同与提供网页的域发出请求防止恶意网站代表用户向其他网站发出未经授权的请求。

同源限制指定Web服务器应该允许在网页上允许的脚本访问来自网页的源托管网页的服务器的域名、协议和端口号的数据但应阻止脚本访问来自不同源的数据。这是为了防止恶意网站能够访问其他网站的敏感数据例如登陆凭证或金融数据。

同源限制适用于所有类型的HTTP请求以及使用XMLHttpRequest和Fetch API等API发出的请求。

限制范围

如果我们的请求是非同源的将会受到以下限制

HTTP Cookie、HTTP Authenticate头和客户端SSL证书将不会随请求一起发送
服务器的响应将无法在网页脚本中读取结果对象的属性除非服务器通过设置适当的CORS头明确允许
服务器的响应将无法在网页脚本中设置任何cookie或其他头。
无法接触非同源网页的DOM
另外通过JavaScript脚本可以拿到其他窗口的window对象。如果是非同源的网页目前允许一个窗口可以接触其他网页的window对象的九个属性和四个方法。

九个属性

window.closed
window.frames
window.length
window.location
window.opener
window.parent
window.self
window.top
window.window
上面的九个属性之中只有window.location是可读写的其他八个都是只读。注意即使是location对象在非同源的情况下也只允许调用location.replace()方法和写入location.herf属性。

四个方法

window.blur()
window.close()
window.focus()
window.postMessage()

1. 什么是Nginx
   Nginx是一个 轻量级/高性能的反向代理Web服务器他实现非常高效的反向代理、负载平衡他
   可以处理2-3万并发连接数官方监测能支持5万并发现在中国使用nginx网站用户有很多例
   如新浪、网易、 腾讯等。
2. 为什么要用Nginx
   跨平台、配置简单、方向代理、高并发连接处理2-3万并发连接数官方监测能支持5万并发
   内存消耗小开启10个nginx才占150M内存 nginx处理静态文件好耗费内存少
   而且Nginx内置的健康检查功能如果有一个服务器宕机会做一个健康检查再发送的请求就不
   会发送到宕机的服务器了。重新将请求提交到其他的节点上。
   使用Nginx的话还能
   节省宽带支持GZIP压缩可以添加浏览器本地缓存
   稳定性高宕机的概率非常小
   接收用户请求是异步的
3. 什么是正向代理和反向代理
   正向代理就是一个人发送一个请求直接就到达了目标的服务器
   反方代理就是请求统一被Nginx接收nginx反向代理服务器接收到之后按照一定的规 则分发给
   了后端的业务处理服务器进行处理了
4. Nginx的优缺点
   优点
   占内存小可实现高并发连接处理响应快
   可实现http服务器、虚拟主机、方向代理、负载均衡
   Nginx配置简单
   可以不暴露正式的服务器IP地址
   缺点 动态处理差nginx处理静态文件好,耗费内存少但是处理动态页面则很鸡肋现在一般
   前端用nginx作为反向代理抗住压力
5. 为什么要做动静分离
   Nginx是当下最热的Web容器网站优化的重要点在于静态化网站网站静态化的关键点则是是动
   静分离动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开
   来动静资源做好了拆分以后我们则根据静态资源的特点将其做缓存操作。
   让静态的资源只走静态资源服务器动态的走动态的服务器
   Nginx的静态处理能力很强但是动态处理能力不足因此在企业中常用动静分离技术。
   对于静态资源比如图片jscss等文件我们则在反向代理服务器nginx中进行缓存。这样浏览器
   在请求一个静态资源时代理服务器nginx就可以直接处理无需将请求转发给后端服务器
   tomcat。 若用户请求的动态文件比如servlet,jsp则转发给Tomcat服务器处理从而实现动静分
   离。这也是反向代理服务器的一个重要的作用。