美文网首页
nginx服务器搭建配置解决多客户端之间调接口跨域问题

nginx服务器搭建配置解决多客户端之间调接口跨域问题

作者: haiyong6 | 来源:发表于2019-09-26 21:32 被阅读0次

    多个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作为一个服务器能做的还有很多 在反向代理 负载均衡 前后端分离 方面比较有优势 有待后续继续学习

    相关文章

      网友评论

          本文标题:nginx服务器搭建配置解决多客户端之间调接口跨域问题

          本文链接:https://www.haomeiwen.com/subject/kdamuctx.html