使用nginx代理解决跨域问题
先说说跨域这事情吧。早在13年，我刚接触前端开发的时候就遇到了跨域，那时候刚开始流行前后端分离。解决跨域就是直接用get jsonp。还是小白的我，也没有去想跨域的其它解决方式和为什么要采用这种解决方式。
最近，做一个二次开发的项目，也碰到了用网页请求http post，浏览器跨域，不能获取返回数据的问题，所以再次来梳理下这个跨域，为什么最后选择了nginx代理。
首先，什么是跨域呢？首先需要了解的是同源和跨源的概念。对于相同源，其定义为：如果协议、端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。 只要三者之一任意一点有不同，那么就为不同源。 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。当一个资源从与该资源本身所在的服务器的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。跨域不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。 简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。
跨域的解决方案也有很多种。
类型一：有些浏览器可以设置 ，降低它的安全性。但是对于一个网站，要求设置浏览器是不切合实际的。
类型二：直接用form方式 ，这种情况下不是ajax请求，而是直接访问目标地址了，不存在跨域问题，但是这个页面已经跳转了。而我们想实现的只是取另外一个地址的数据到本地显示而已。
类型三：服务端语言是能够处理的情况下。
1、CORS 是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。其需要服务端和客户端同时支持。
对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。 Access-Control-Allow-Origin 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。 Access-Control-Allow-Credentials 该字段可选。 Access-Control-Expose-Headers 该字段可选。
可以说这种办法主要在header上下功夫，设置Access-Control-Allow-Origin为所有*允许访问。虽然说它支持所有的请求方式，post，delete，put等等，但是它不能兼容ie6，7等等。
例如下图的nodejs express 例子：
2、服务端的http ajax请求全部改为 get jsonp方式 。该方式能够兼容老式浏览器。
3、iframe window.name 这种传值得方式很巧妙，兼容性也很好。但是在要访问数据的地址那个服务器要有一个空的中间页面拿来用。
4、postMessage ， html5 window.postMessage。 同iframe window.name有点像，也是需要服务端有个空的html拿来接收数据。而且现在的postMessage兼容性也不好。
5、document.domain 修改为顶级域名。
6、 WebSocket ，协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
类型四：不是简单的前后端。假如有个第三方的api，自己有一个网站前端，一个网站后端。
1、自己的网站端和后端源码放在同一个服务端口和目录下，不存在跨域。当直接用网站前端的http访问第三方api，浏览器跨域。此时，改为由网站后端的服务端语言访问，做个中间人，将访问的数据给网页前端。
2、网站前端和后端不是同源的，采用以上的跨域方案，譬如CORS。同样的网站后端做中间人，访问第三方api，再转给网页前端。
3、使用nginx 反向代理解决跨域问题。 网站前端访问nginx服务的地址，nginx设置代理地址为访问第三方api地址，当访问代理地址的时候，浏览器访问的是nginx服务的地址，实际是访问第三方api地址。
注意：此时，如果目录下有个proxy.html,因为设置代理地址是/proxy，碰到这个地址就被转到”“，所以要访问proxy.html是访问不到的。
4、使用nginx代理地址是解决生产环境发布的问题了，那么我在开发的时候使用angular这样需要打包的框架怎么办呢。当然在开发环境下，angular也是由类似代理地址的解决方案的。
（1）创建配置代理文件：假设后端服务的访问地址为，我们可以创建一个proxy.conf.json文件，放在package.json同目录下。
（2）改写package.json文件 ，采用--proxy-config命令（angular自带的命令）。
(3)ajax访问代理地址
此时， 执行 npm start ，即可发现，浏览器访问 的同源地址，实际上是访问.
angular在开发环境下代理地址的方法类似在生产环境下使用的nginx代理。但是测试angular是有一个/api代理地址的巧合。刚好第三方api上面的地址有个api，才能使用这个地址，并且能够简写一个api，才能成功访问，如果更改为其它的，譬如proxy，就测试失败。而且proxy.conf.json文件下的设置也只能是域名和端口。所以，本人测试，这或许是个巧合或者是缺陷。
五、其它
当然，跨域这个算是历史性的问题，以后也会存在这个问题。除了上面各种方法，以及根据各种方法使用的场合，还有许多其它的方法。例如各大流行框架react，vie应该也有像angular一样，能够处理跨域的开发环境方案，接下来，还是要继续学习和积累。
Nginx转发+反向代理实现跨域接口转发
最近工作遇上业务交接不彻底还有一些乱七八糟原因，导致我需要将几个接口的请求转发到新团队负责的域名下。
参考文档：
主要是为了记录自己工作中解决的一些问题，所以笔记就简单一些，涉及到工作的一些具体数据就不记录了
原域名：soa.api.local
目标域名：newsoa.api.local
方法名：functionName
第一版：
出于偷懒的方式，直接选择return进行跳转
结果通过Http请求返回的是字符串
"{"id":770080,"bid":9}param1=param1param2=param2"
第二版：
使用rewrite进行重定向
但是有点问题，在浏览器中可以看到跳转到新的域名了，但是打开开发者工具会看到有两次请求，第一次是对原域名soa.api.local的请求，返回的HttpCode为302。第二次请求为重定向后的请求。
所以如果客户端跟踪重定向，那根本就获取不到第二次请求的数据。
第三版
使用rewrite和反向代理实现
终于达到我要的效果了，客户端能保持当前链接不变的情况下获取到重定向后的数据。
Nginx的反向代理跨域
什么是跨域？
跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址， b页面为域名地址，所进行的访问行动都是跨域
浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源
同ip（或domain）,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写 本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略
现代浏览器在安全性和可用性之间选择了一个平衡点。 在遵循同源策略的基础上，选择性地为同源策略“开放了后门”。例如img script style等标签，都允许垮域引用资源,然而， 你也只能是引用这些资源而已，并不能读取这些资源的内容
同源策略限制以下几种行为：
1.Cookie、LocalStorage 和 IndexDB 无法读取
2.DOM 和 Js对象无法获得
3.AJAX 请求不能发送
同一域名，不同文件或路径 允许 同一域名，不同端口 不允许 同一域名，不同协议 不允许 域名和域名对应相同ip 不允许 主域相同，子域不同 不允许 不同域名 不允许
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
正向代理 ：代理位于网站和客户端中间， 客户端无法访问某网站，就将请求发送给代理服务器，代理从网站取回来再发送给客户端，网站并不知道为谁提供服务
反向代理 ：客户端访问某网站的一个页面， 但是网站并没有，就偷偷从另外一台服务器上取回来,然后作为自己的内容吐给用户，用户不知道真正提供服务的是谁
对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过 检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确 处理请求，并且并不知道这个请求是来自代理服务器的。
简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实 的服务器，让它以为这个http请求是直接来自与用户浏览器的。
Location/carrots-admin-ajax/{
proxy_pass;
}
proxy_pass 把请求代理到其他主机
两种写法h 和
如果访问url = ，则被nginx代理后
情况1，将test/作为根路径，请求test/路径下的资源。
情况2，则被nginx代理后，请求路径会变为，直接访问server的根资源。
是一个匹配规则，用于拦截请求，匹配任何以/proxy/html/开头的地址，匹配符合以后，停止往下搜索正则。
对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。
简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自与用户浏览器的。
1.执行server块的rewrite指令(这里的块指的是server关键字后{}包围的区域，其它xx块类似)
2.执行location匹配
3.执行选定的location中的rewrite指令
如果其中某步URI被重写，则重新循环执行1-3，直到找到真实存在的文件
如果循环超过10次，则返回500 Internal Server Error错误
7.参考文献
参考一：
参考二：
8.更多讨论
提问：
Q ：例如img script style等标签，都允许垮域引用资源？
A ：在浏览器中，并且加载的方式其实相当于一次普通的GET请求，唯一不同的是，为了安全起见，浏览器不允许这种方式下对加载到的资源的读写操作，而只能使用标签本身应当具备的能力（比如脚本执行、样式应用等等）。
Q ：例如img script style等标签，都允许垮域引用资源？
A ：在浏览器中，并且加载的方式其实相当于一次普通的GET请求，唯一不同的是，为了安全起见，浏览器不允许这种方式下对加载到的资源的读写操作，而只能使用标签本身应当具备的能力（比如脚本执行、样式应用等等）。
Q：JSONP和nginx跨域有什么不同
JSONP和nginx是完全不同的 是可以跨域的，而且在跨域脚本中可以直接回调当前脚本的函数
原理：是可以跨域的，而且在跨域脚本中可以直接回调当前脚本的函数
script标签是可以加载异域的JavaScript并执行的，通过预先设定好的callback函数来实现和母页面的交互。它有一个大名，叫做JSONP跨域，JSONP是JSON with Padding的略称。它是一个非官方的协议，明明是加载script，为啥和JSON扯上关系呢？原来就是这个callback函数，对它的使用有一个典型的方式，就是通过JSON来传参，即将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。JSONP只支持GET请求。
宝塔面板Nginx反向代理解决跨域问题
主要使用Nginx反向代理实现
api地址为：
前端访问地址为:
现在前端如果访问接口地址就会出现跨域的问题
配置如下
修改配置文件
完成以上设置就可以跨域访问了
webpack配置proxy反向代理，解决跨域问题
webpack官网
此时访问的接口地址在本地被解析为 localhost:8080/api/***
访问的真实地址是 ***
在 上有后端服务的话，你可以这样启用代理：
请求到 /api/users 现在会被代理到请求 。
如果你不想始终传递 /api ，则需要重写路径：
默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，修改配置如下：
如果你想要代理多个路径特定到同一个 target 下，你可以使用由一个或多个「具有 context 属性的对象」构成的数组：