利用nginx反向代理解决前端自测api跨域问题

时间:2024-04-09 16:35:40

      这几天在做毕设,选了数据可视化的课题,也顺便学习一下前端的知识。作为一个后端工程师,我习惯了只提供api给前端这种高效的交互方式,但是自己做一整个项目的时候遇到麻烦了,那就是如何渲染数据的问题。(ps本人之前写过html,css了解一些,js也能看懂的水平)

电脑系统及背景介绍:macOS,本地nginx服务器,后端api由本地Spring Boot项目自带tomcat起


写完html与ajax后,在浏览器中跑时出现了跨域问题

关于跨域:

1.什么是跨域

回答:ajax或者iframe指向的地址中,二级域名、端口、协议必须与主页面完全相同,否则就算跨域

例如我本地的前端地址:http://localhost:8081/chart/demo.html
后端api地址:http://localhost:8080/api/chart
可以看到这里的端口号是不一样的,所以是跨域。

2.跨域的解决

解决跨域也有很多方法,如服务器端设置header,使用jsonp等,这里我采用的是搭建本地nginx进行反向代理的做法。好处是无代码侵入,不用修改服务器端等配置,方便调试,顺便也学习了一下nginx的配置。


利用nginx解决跨域

1.nginx反向代理的原理

nginx是一个高性能的web服务器,特点是并发数高,一般在大型项目中都有应用,用来进行负载均衡的实现,如图


利用nginx反向代理解决前端自测api跨域问题

反向代理是指以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器;并将从服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。

2.nginx代理的配置以及实际过程讲解

   server {
        listen       8081;    //监听8081端口
        server_name  localhost;


        #charset koi8-r;


        #access_log  logs/host.access.log  main;


        location / {
            root  /Users/xx/project;    //设置根路径
            index  index.html index.html;


        }

     location /api {        //匹配url中带有api的,并转发到http://localhost:8080/api
  rewrite  ^/api/(.*)$ /$1 break;         //利用正则进行匹配
  proxy_pass http://localhost:8080;      //转发的参数设定
}

设置中注意的点我以注解的形式做了标注。

结合上图两个url为例:

例如我本地的前端地址:http://localhost:8081/chart/demo.html
后端api地址:http://localhost:8080/api/chart

我访问本地的前端路径,此时通过8081端口,被nginx服务器监听到。这时执行html中的ajax请求,访问后端api,具体ajax如下图

$.ajax({
    type : "post",
    //暂时用同步请求,异步有bug无法显示
    async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
    url : "/api/chart",    //请求发送到TestServlet处
    data : {},
    dataType : "json",        //返回数据形式为json
    success : function(result) {
        console.log(result);
        //请求成功时执行该函数内容,result即为服务器返回的json对象
        if (result) {
            for(var i=0;i<result.length;i++){
                nums.push(result[i]);    //挨个取出销量并填入销量数组
            }


        }
        myChart1.setOption(
            {

                series: [{
                    // 根据名字对应到相应的系列
                    name: '数值量',
                    data: nums,
                    type: 'bar'
                }]
            }
        )
可以看到,此时url设定为/api/chart,html执行ajax请求时,因为里面有/api字符串会被刚才配置的nginx服务器发现,通过代理,转发为localhost:8080/api/chart,也就是本地后端的地址,从而实现正确请求。因为此时是服务器进行转发,没有对域名,端口号进行修改,也就没有跨域的问题。


总结:

前后端交互测试一直是一个比较头痛的问题,经常出现两边进度不一样到时无法测试的问题。利用nginx反向代理测试解决跨域等问题,前端就可以自己模拟数据请求,然后渲染数据,对开发效率有很大帮助。