Nginx通过反向代理解决跨域问题
Nginx通过反向代理解决跨域问题
⼀、问题的由来小虎队爱歌词
深圳大学鸟瞰图随着项⽬不断地演进，难免会涉及到微服务架构。当采⽤微服务架构之后，web项⽬⾃然免不了⾯临跨域的问题。最近学习了⼀下这⽅⾯的知识，做个⼩笔记⽅便以后回顾，希望各位⼤神多多指教。
⼆、跨域究竟是个什么东东
跨域问题的出现是由于浏览器出于安全⽽遵守⼀个叫做“”的约定，⽽限制访问不同源下的资源⽽导致的。具体哪些情况属于同源，可参考⼤神⽂章--“”。
既然是浏览器都遵循的⼀个公共策略，⽽且是出于安全性考虑的，那么我们遇到跨域问题就要谨慎解决，不然则会导致应⽤安全性下降。著名的(Cross Site Request Forgery)，即跨站请求伪造，
如果没有同源策略的限制的话就能轻易实现。虽然由于同源策略的限制，web应⽤的安全性提⾼了但同时也带来⼀些⿇烦，⽐如我们服务器有两个端⼝，这时我们想在Ajax调⽤另⼀个端⼝的服务就不⾏了。
就好⽐中国对⼀些外⽹的IP封锁，它保护了国家重要关键信息的安全，同时也给⼤家查资料带来了⼀些⿇烦。可参考⼤神⽂章--“”。
端午节免高速路费吗
值得强调的是，跨域问题是浏览器对于访问的限制，可以通过禁⽤浏览器同源测略来解除限制。可参考⼤神⽂章--“”。
对于跨域请求，如果服务不可⽤的情况下，那么控制台的错误是这样的：
显⽰连接被拒绝了，⽽当服务可⽤的时候，控制台返回的错误是这样的：
止战之殇是什么意思
可以发现如果没有做相应的跨域处理的话，浏览器其实是能发送这个请求的，但是当浏览器检测这是⼀个不被允许的跨域请求的话，则会放弃这个请求，返回失败。
在⽹上看到⼀个图很形象地描述了这⼀过程：
这也就说明了，跨域请求是由浏览器来拦截控制的，也就解释了简单粗暴地直接关闭浏览器的同源策略检查就能实现跨域访问的原理，但是这样就等于完全放弃了安全检查，那么该怎么办呢？
著名⽂学家鲁迅先⽣曾经说过----“只要思想不滑坡，⽅法总⽐困难多”。IP封锁阻挡不了⼤家查资料的热情，各种FQ软件层出不穷，当然跨域问题也是有相应的解决⽅案的。
三、解决跨域问题的正确姿势
解决跨域问题有很多⽅法，像什么jasonp、document.domain + iframe跨域、location.hash + iframe跨域、跨域资源共享（CORS）等等。每种⽅法都有⾃⼰的优缺点，⼤家可根据需求⾃⾏选择相应的解决⽅案，
具体可参看⼤神⽂章--“”。
我这⾥采⽤的是“nginx反向代理跨域”，即通过配置nginx代理来实现请求的转发从⽽实现跨域访问。相信⼤家都听过nginx的⼤名，它可以⽤来做静态http服务器、正反向代理、负载均衡、虚拟主机等。
使⽤nginx来解决跨域问题其实就是利⽤了其反向代理的功能。如果不清楚nginx正反向代理的同学，可参考⼤神⽂章--“”。
爱情这杯酒谁喝都得醉四、进⼊正题
当然在这之前需要⼤家先了解nginx的相关知识，⼤家可⾃⾏百度，nginx也是个好东西可以了解了解。
先⽤HBuilder创建⼀个简单的页⾯，两个按钮分别发送请求到Java服务器（5001端⼝）和.NET Core服务器（5000端⼝），HBuilder页⾯所在端⼝为8848。
老年人奶粉然后创建两个api接⼝，⼀个Java的，⼀个.NET Core的，与之前说的端⼝对应上，然后开启服务，接⼝测试正常。没有配置nginx时访问不出意料地显⽰跨域错误：
接下来就是配置nginx了，安装nginx后到配置⽂件f，修改转发规则：
nginx的核⼼在于配置⽂件的编写，这⾥我简单地写了三条转发规则，nginx还⽀持更复杂的转发配置，更详细的nginx配置规则⼤家可⾃⾏百度学习。然后测试页⾯的Ajax地址做简单修改，使之与nginx的转发规则匹配：
接下来就是见证奇迹的时刻了：
访问成功了，并且可以发现返回请求的服务器类型是nginx，通过nginx将配置了转发规则的请求转发到指定服务器，⽽没有配置的地址还是会被浏览器拦截的，实现了安全可控的跨域访问。
好了，到这⾥算是完美解决了跨域问题，当然实际开发过程中还可能出现各种各样的问题，还是需要不断学习。加油，奥⼒给

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。