在写项目的过程中,遇到这样一个问题:基于公司的V6平台开发一个前后端分离的项目,Tomcat容器管理13411接口以便于接入V6平台,但是Html页面无法支撑,因为Html页面必须布置在另一端口下,无法用13411端口,所以这就会存在
跨越
问题,我们想到了两种解决思路:
1)建Web项目,通过Tomcat容器进行管理并解析Html视图,Web中的Ajax请求不直接请求13411,而是请求后端,后端接收到请求,在通过Http直接请求13411。
2)走Nginx代理避开跨越问题。
经过一致商议,都觉得走Nginx比较好,所以下载安装Nginx到Linx服务器,并修改Nginx配置文件nginx.conf,自觉配置没毛病,所以访问Index是成功的,但是Ajax一发起请求,就报错:
这是典型的跨越问题,所以配置文件加了请求头,如下:
然后测试,还是报跨越的错,查看控制台:
浏览器输出响应码是200,但是请求死活发不出去,各种百度谷歌,发现自己配置文件也没写错啊!!!!(这个时候已经怀疑就是配置文件没写对,但是就是不知道哪里没配对,所以又隐隐觉得配置文件是对的——因为针对跨越问题,就是配置几行简单的代码)
这个时候已经快绝望了,折腾了一天,项目又很赶,打算换第一种解决办法的时候,突然想到了一个词,Nginx的反向代理,究竟什么是反向??
理解这个问题之前,我们先看两个概念:
正向代理:
位于客户端和原始服务器(origin server)之间的服务器,代理客户端向原始服务器转交请求并将获得的内容返回给客户端,这就是正向代理。
正向代理最大的特点:客户端非常明确要访问的服务器地址,而服务器只清楚请求来自哪个代理服务器而不清楚来自哪个具体的客户端;正向代理模式屏蔽或者隐藏了真实客户端信息。
正向代理的用途:
1)代理客户端访问无法访问的资源
2)加速访问资源(做缓存)
3)对客户端访问授权(上网认证)
4)记录用户访问记录(上网行为管理),对外隐藏用户信息
反向代理:
以代理服务器来接收客户端的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给客户端。
单纯理解概念,好像正向代理和反向代理的区别差不多,但是观看对比图,我们就可以知道,正向代理客户端知道有代理服务器这个东西,但是反向代理,客户端就不知道有这么个东西[此时代理服务器对外就表现为一个服务器]。
反向代理的作用:
1)保证内网的安全,可以使用反向代理提供WAF功能,阻止web攻击。大型网站,通常将反向代理作为公网访问地址,Web服务器是内网。
2)负载均衡,通过反向代理服务器来优化网站的负载。
我们都知道,Nginx大致分为以下几个部分:
main # 全局配置
events { # nginx工作模式配置
http { # http设置
server { # 服务器主机配置
location { # 路由配置
location path {
location otherpath {
server {
location {
upstream name { # 负载均衡配置
所以,明白这些概念的时候,才发现陷入了一个坑,仔细想想,理解完全错了,配置文件根本没用上Nginx的反向代理功能,所以修改了配置文件:Ajax发起8090请求,Nginx静态代理8090,同时转发请求至13411,具体如下:
server {
listen 8090;
server_name 128.1.136.129;
#access_log logs/host.access.log main;
location ^~ /HttpServer/ {
proxy_pass http://128.1.136.129:13411;
location / {
root /root/data/dist;
index index.html;
Nginx是非常强大的web服务器加反向代理服务器加邮件服务器等等,项目使用中,使用最多的三个核心功能是反向代理、负载均衡和静态服务器,这三个不同的功能的使用,都跟nginx的配置文件nginx.conf相关,理解反向代理,负载均衡也就很容易理解啦!
在写项目的过程中,遇到这样一个问题:基于公司的V6平台开发一个前后端分离的项目,Tomcat容器管理13411接口以便于接入V6平台,但是Html页面无法支撑,因为Html页面必须布置在另一端口下,无法用13411端口,所以这就会存在跨越问题,我们想到了两种解决思路:1)建Web项目,通过Tomcat容器进行管理并解析Html视图,Web中的Ajax请求不直接请求13411,而是请求后端,后端接...
nginx解决跨域问题
在项目开发中,我们很常见的一个问题是,本地是localhost开发的,接口一般是给IP地址,例如http://192.168.13.14/api, 这样直接在项目中调用接口 浏览器会报跨域错误, 因为localhost和http://192.168.13.14并不是同源的。
一般我们的解决方法是在webpack中设置代理,配置devServer:
module.exports = {
devServer: {
proxy: {
1、修改浏览器、客户端访问地址
2、在nginx.conf配置文件需配置server
3、在Nginx中配置客户端访问的接口(按照规则或通配),并设置被代理的服务器
4、在Nginx中统一配置客户端访问的头部信息(解决跨域问题)
5、在服务器端设置相应的头部信息(字符集编码等)
遇到这样一个有趣的事情,由于行里测试服务器有限,需要在一台测试服务器上同时部署多个项目,前端采用Vue进行开发,由于是多个项目,所以代理这些静态文件直接丢到webapp下肯定不可取,采用
Nginx也完全没必要,所以打算利用Tomcat对这些Vue项目进行代理,那具体如何操作呢?
我们说一下项目环境,后端暂定2个项目,都是SpringBoot开发,一个项目跟路径为ybt,启用8080端口,一个项目跟路径为mzt,启用8081端口,Tomcat代理vue项目采用7070端口,那么,前端大致的路由映射为:
还是手机银行嵌入办事通的项目,这个项目比较坑的地方在于没有项目文档,没有数据交互规范,都是摸石头过河。所以上了生产以后,发现了一个大Bug,收不到IOS的请求数据!(测试过程我没参与,怀疑测试过程可能没有IOS测试)
经过与建行手机银行总行联系,才知道由于手机银行开发框架限制,IOS请求只能发Post请求,所以请求分为两种:Android -- GET请求 Ios -- POST请求