nginx 与跨域
什么是跨域
什么是源
如果协议,端口(如果指定了一个)和域名对于两个页面是相同的,则两个页面具有相同的源。
同源策略
同源策略控制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。该策略控制交互情况分为以下三类:
- 通常允许进行跨域写操作(Cross-origin writes)。例如链接(links),重定向以及表单提交。特定少数的 HTTP 请求需要添加 preflight。
- 通常允许跨域资源嵌入(Cross-origin embedding)。参看
如何解决跨域问题
条目。 - 通常不允许跨域读操作(Cross-origin reads)。但常可以通过内嵌资源来巧妙的进行读取访问。参看
如何解决跨域问题
条目。
如何解决跨域问题
1. 跨域资源嵌入方案
<script src="..."></script>
标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。<link rel="stylesheet" href="...">
标签嵌入 CSS。由于 CSS 的松散的语法规则,CSS 的跨域需要一个设置正确的Content-Type
消息头。不同浏览器有不同的限制: IE, Firefox, Chrome, Safari (跳至 CVE-2010-0051)部分 和 Opera。<img>
嵌入图片。支持的图片格式包括 PNG,JPEG,GIF,BMP,SVG,…<video>
和<audio>
嵌入多媒体资源。<object>
,<embed>
和<applet>
的插件。@font-face
引入的字体。一些浏览器允许跨域字体(cross-origin fonts
),一些需要同源字体(same-origin fonts
)。<frame>
和<iframe>
载入的任何资源。站点可以使用X-Frame-Options
消息头来阻止这种形式的跨域交互。
nginx 为什么能解决跨域
nginx 是一个高性能的 web 服务器,常用作反向代理服务器。nginx 作为反向代理服务器,就是把 http 请求转发到另一个或者一些服务器上。 通过把本地一个 url 前缀映射到要跨域访问的 web 服务器上,就可以实现跨域访问。 对于浏览器来说,访问的就是同源服务器上的一个 url。而 nginx 通过检测 url 前缀,把 http 请求转发到后面真实的物理服务器。并通过 rewrite 命令把前缀再去掉。这样真实的服务器就可以正确处理请求,并且并不知道这个请求是来自代理服务器的。 简单说,nginx 服务器欺骗了浏览器,让它认为这是同源调用,从而解决了浏览器的跨域问题。又通过重写 url,欺骗了真实的服务器,让它以为这个 http 请求是直接来自与用户浏览器的。 这样,为了解决跨域问题,只需要动一下 nginx 配置文件即可。
nginx 反向代理配置
nginx 为解决反向代理问题增加了 ngx_http_proxy_module 模块
proxy_set_header Host Host含义是表明请求的主机名
proxy_set_header X-Forward-For