多个tomcat服务器之间的项目如果互调接口的情况下,ajax请求时是会有跨域问题的,
如 我用一个8082端口的tomcat下启动一个MyBlog2的项目正常请求的接口如下:
深度截图_选择区域_20190923225425.png
当在8081端口的tomcat上的一个项目中ajax调用这个接口时会存在跨域问题,如图报错信息:
深度截图_选择区域_20190923225623.png
跨域问题如何解决呢 利用Nginx服务器的反向代理转发功能,可以通过nginx服务器转发到其他tomcat解决跨域问题。
下载Nginx
官网地址:http://nginx.org/en/download.html
可以下载windows版或linux版,操作方式都差不多,如果是windows版,下载下来解压之后cmd打开文件夹直接运行start nginx就好了。我用的deepin系统,这里以debian系linux版为例:
把在官网下载的压缩包解压到一个文件夹
比如我把压缩包放在了~/myspace/profile这个文件夹
//解压
tar -zxvf nginx-1.16.1.tar.gz
cd nginx-1.16.1
//执行初始化命令
sudo ./configure
sudo make
sudo make install
执行完上面的命令后,在/usr/local下出现了nginx,默认安装在这里。
cd /usr/local/nginx/sbin
//把nginx命令放入系统命令
cp nginx /usr/bin/
//启动nginx
sudo nginx
这样nginx就启动了 默认占用80端口,配置文件在conf下的nginx.conf
在浏览器访问localhost能看到启动成功的欢迎页面如图
深度截图_选择区域_20190923231914.png
启动,关闭,重启,命令:
sudo nginx 启动
sudo nginx -s stop 关闭
sudo nginx -s reload 重启
配置nginx.conf
此文件中server可以写多个,可以listen不同的端口,每个server里可以写多个location,可以转发不同的tomcat地址
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
upstream localTomcat {
server localhost:8081;
}
upstream localTomcat1 {
server localhost:8082;
}
server {
listen 8083;
location / {
#root html;
#index index.html index.htm;
proxy_pass http://localTomcat;
#允许cros跨域访问
add_header 'Access-Control-Allow-Origin' '*';
}
location /MyBlog2 {
#root html;
#index index.html index.htm;
proxy_pass http://localTomcat1;
#允许cros跨域访问
add_header 'Access-Control-Allow-Origin' '*';
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
如上配置中server监听8083端口,location /MyBlog2 代表访问8083端口且以MyBlog2开头的请求路径 都会走http://localTomcat1; localTomcat1在upstream里有定义指向localhost:8082 也就是说请求:http://localhost:8083/MyBlog2 等于 http://localhost:8082/MyBlog2
所以在8081的tomcat项目里用ajax调用8083下的MyBlog2开头的路径是会被转发到8082端口上的 配置下面一句便可跨域访问
#允许cros跨域访问
add_header 'Access-Control-Allow-Origin' '*';
ajax前端代码
$.ajax({
url : "http://localhost:8083/MyBlog2/test.do",
contentType: "application/json",
type : 'post',
dataType:"json",
processData:false,
contentType:false,
async:true,
success : function(data){
alert(data);
},
error : function(data){
alert(data);
}
});
修改完配置文件之后reload一下使配置生效
sudo nginx -s reload
再次刷新页面可以看到在8081下调用8082项目的接口已可正常返回数据 如图
深度截图_选择区域_20190923233727.png
关于nginx location配置下面的链接讲的比较细,可以参考一下
https://www.cnblogs.com/cheyunhua/p/7927674.html
nginx作为一个服务器能做的还有很多 在反向代理 负载均衡 前后端分离 方面比较有优势 有待后续继续学习
网友评论