环境:
服务器:nginx
前端:vue-cli、代理
现象:
vue中使用axios请求一个文件,文件内容是json格式的字符串,其中中文没有进行编码,默认对一个对象进行编码的话,里面的中文会被编码成 '\u6309\u76ee' 这种格式,但是这样编码的内容肉眼看不懂,也不好修改,所以php进行json_encode($obj, JSON_UNESCAPED_UNICODE).可以保留汉字为原来的显示,
但是vue使用axios请求后,在devtool中看到是乱码,不影响使用,console.log(),依然可以打印出来。
如何使axios请求的数据,在devtool中正常显示呢,nginx加一个Content-Type:text/html; charset=utf8即可。
location ^~ /commonweb/ {
add_header Content-Type 'text/html;charset=utf-8';
add_header test-foo 'lalala';
root /home/www/project/htdocs;
try_files $uri $uri/ /debug/a/index.html;
index index.html index.htm;
}
但是因为使用了本地代理,devtool看请求的response发现,test-foo添加成功了,Content-Type没有改,甚至Content-Type的首字母还是小写的。这时候不使用proxy代理,直接使用全路径url请求,就正常了。devtool network response看到的原始数据就是中文未编码的字符串。preview中看到也是正常的中文,没有乱码了。
附言:
虽然这种乱码瑕疵即使不做任何配置,也不影响项目的使用,不影响中文的解析,但是从中多少能加深对前后端交互的了解。
调试时,可以用Fiddler加自定义规则,加Content-Type