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

这几天在做毕设，选了数据可视化的课题，也顺便学习一下前端的知识。作为一个后端工程师，我习惯了只提供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反向代理测试解决跨域等问题，前端就可以自己模拟数据请求，然后渲染数据，对开发效率有很大帮助。

秒客网

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

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

总结：

相关文章