这几天一直在做毕业设计，选的题目是数据可视化，也学习了一些前端知识。作为一名后端工程师，我习惯于仅通过 API 向前端提供高效的交互方式。然而，当我自己做一个完整的项目时，我遇到了麻烦，那就是如何渲染数据的问题。 （ps我以前写过html，懂一些css，也能看懂js）
计算机系统及后台介绍：，本地服务器，后端API来自本地Boot项目
写完html和ajax后，在浏览器中运行时出现跨域问题。
关于跨域：
1.什么是跨域：
答：ajax或者指向地址中，二级域名、端口、协议必须与主页面完全一致，否则算跨域
比如我本地的前端地址::8081//demo.html
后端api地址：:8080/api/
可以看到这里的端口号不一样，所以是跨域的。
2. 跨域解决方案
解决跨域问题的方法有很多，比如服务器端的设置、使用等，这里我采用的是设置本地反向代理的方法。优点是无代码侵入，无需修改服务器端配置，方便调试。顺便也学习了一些配置。
使用跨域解决方案
1.反向代理原理
是一款高性能的Web服务器，特点是高并发，一般用于大型项目中，实现负载均衡，如图
反向代理：指使用代理服务器接受来自互联网的连接请求，然后将请求转发给内网的服务器；并将从服务器获得的结果返回给请求连接的客户端。这时，代理服务器就作为服务器出现了。
2. 配置及实际流程讲解
{
8081； //监听8081端口
#koi8-r；
# 日志/主机..log main;
/{
根//xx/； //设置根路径
.html .html;
/api { //将url与api匹配并转发到：8080/api
^/api/(.*)$ /$1; //使用正则表达式进行匹配
：8080； //转发参数设置
设置中需要注意的地方我已经以评论的形式标注出来了。
以上图中的两个URL为例：
比如我本地的前端地址::8081//demo.html
后端api地址：:8080/api/
我访问的是本地前端路径，服务器通过8081端口监听到，此时执行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;ilength;i++){ nums.push(result[i]); //挨个取出销量并填入销量数组 } } myChart1.setOption( { series: [{ // 根据名字对应到相应的系列 name: '数值量', data: nums, type: 'bar' }] } )
可以看到此时url设置为/api/。当html执行ajax请求时，因为里面有/api字符串，所以会被刚刚配置的服务器发现。通过代理，转发到：8080/api/，即本地后端。客户端的地址实现正确的请求。因为此时服务器正在转发，并且域名和端口号没有修改，所以不存在跨域问题。
总结：
前后端交互测试一直是个让人头疼的问题。经常会出现双方进度不同，到时候无法检验的情况。通过使用反向代理测试来解决跨域问题，前端可以模拟数据请求，然后渲染数据，这对开发效率有很大帮助。