我使用的云存储是七牛,只修改了static的url为七牛存储url,upload目录因为涉及到用户头像问题所以没有修改
然而修改之后,在用户编辑自己个人信息时无法显示现居地,JS报错:
XMLHttpRequest cannot load xxxxx.glb.clouddn.com/static/js/areas.js. Request header field Cache-Control is not allowed by Access-Control-Allow-Headers.
原来是因为wecenter通过ajax(
不太正确,因为官方源码中LocationSelect函数被混淆,所以我也没法准确判断,不过根据经验应该是ajax获取)获取areas.js时,获取areas.js的地址和在浏览器地址栏中的域名不同(也就是不同域)导致的错误。
经@jat提醒,错误原因是:
- 因为我使用的是七牛云存储,七牛在输出文件时设置了Access-Control-Allow…… 之类的头信息,也就是CORS,一个跨域请求的解决方案。
- CORS中定义了一个头字段Access-Control-Allow-Headers,表示允许自定义的头字段信息,而七牛输出时没有Access-Control-Allow-Headers字段
- 请求areas.js时,LocationSelect函数设置了areas.js的Cache-Control头字段,而七牛并没有输出Access-Control-Allow-Headers,浏览器认为不允许控制areas.js的任何头字段。所以最后报错。
解决方案:
- 和七牛协商服务器在输出时添加Access-Control-Allow-Headers头字段信息,或者更换云存储服务,并要求添加Access-Control-Allow-Headers头和允许控制Cache-Control、Expires头信息。
- 修改static/js/plug_module/plug-in_module.js中的LocationSelect方法,去掉setRequestHeader语句。
- 修改areas.js为同源。
我是将areas.js修改为同源,其他几种方案太麻烦:将获取areas.js的代码修改为直接访问源站,不访问cdn url,这样子也就减慢了加载速度,有失有得,修改views/default/account/setting/profile.tpl.htm文件,找到
dataUrl这一行,替换为以下字符。
dataUrl: '/static/js/areas.js'
PS:wecenter3.1.3版本,default主题。
阅读全文
收起全文