前后端分离中遇到的哪些坑

前后端分离中遇到的哪些坑

跨域问题

1.为什么会出现跨域问题？
出于浏览器的同源策略限制。同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互,所谓同源(即指同一个域)就是两个页面具备同样的协议(protocol),主机(host)和端口号(port)
2.跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型
3.解决方案：
经过多出查阅，得知使用cors来解决这类问题
CORS方案，就是通过服务器设置响应头来实现跨域 。
这里，前端无需改动，正常发送Ajax请求即可
后端则需改动，这里需要后端增加响应头，或者使用第三方模块cors，我在项目中则使用了第二种解决方案来解决了问题


加入后即可解决这类跨域问题

json数据处理问题

数据处理我则引用：

https://wenku.baidu.com/view/e9fbdc39ff4ffe4733687e21af45b307e871f9e6?aggId=526c965101768e9951e79b89680203d8ce2f6ad5&fr=catalogMain

但中途遇到 js解析json时取出数据为undefined的问题：
这时需要：
利用 ajax 一步拿到的数据转换为 json 格式往前台传数据时，有时浏览器会将其解析为一个语句块来处理。所以需要将其转换为一个对象来取数据。

for(var i=0;i<data.length;i++)
            {
                if(i==0)  var result1=eval("("+data[i]+")");
                if(i==1)  var result2=eval("("+data[i]+")");
                if(i==2)  var result3=eval("("+data[i]+")");
                if(i==3)  var result4=eval("("+data[i]+")");
            }

data为json数据，内涵多个元素，通过遍历一一转换。

base64转换问题

在js中直接设置img属性值为 图片的base64数据即可。

document.getElementById('img').setAttribute('img', 'base64数据')

我的设置如下：

 var data1="data:image/jpg;base64,"+result1.img;
 document.getElementById('pic1').setAttribute('src', data1);

这里的pic1意思为id为pic1的img，设置src属性=data1.

数据返回给后台问题

这里我通过表单form返回，具体操作如下：

<form id="file_upload" action=" 你要发送的地址" enctype="multipart/form-data" method="post">

若想要接收的话，js则可以在想要接收的部分设置：

 $(function () {
	 $("#file_upload").ajaxForm(function (data) {
	            console.log(data);
	            }
	  );
 });