js,javascript--跨域问题
2015-09-29 17:01
441 查看
最近在做的一个功能是在新增一个app信息的时候,其中有一个框是上传文件,如图
在点击上传文件时候调用js进行转向另一个服务器的上传文件模块,上传完成后把地址返回并赋值在文本框上,这一块用的是window.open方法,再上传完成后子窗口中赋值给父窗口,在把其他信息填完后提交表单把信息存上。后来因为把文件服务器部署在别地了,就出现了父窗口取不到子窗口返回值的问题了,这是因为js跨域的问题,于是开始找解决方法,看网上说的一方式大多差不多,但我认为那样做不太好,后来看到用jsonp方式,试了一下不适合我的业务,这种方式跨域请求一个方法直接处理完返回值还可以,因为我到文件服务器后会先调出上传页面在上传,因为是springMVC,所以如果用jsonp方式的话,就会返回上传页面的代码了,于是放弃这种方式,后来就把上传的页面也放到本地服务器了,而只是把上传的接收multipart的那部分留在文件服务器,这样就不涉及到父窗口和子窗口跨域的问题,这样就能拿到返回值了,但是还有一个问题,就是在multipart请求到文件服务器时因为请求跨域了,所以http会以options的方式先去做一个安全校验以后才会请求,这就需要在文件服务器中加入filter过滤器,在每个请求上加入如下代码:
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers","User-Agent,Origin,Cache-Control,Content-type,Date,Server,withCredentials,AccessToken");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
这样请求就会到达文件服务器并完成上传,这里上传文件使用的是webuploader,只需要在上传的js文件中把服务器地址设置成远程的就可以完成跨域请求了,其实里边问题挺多,也看了挺多东西,但是文笔有限,写不出来,有碰到相应问题的可以一起探讨。
在点击上传文件时候调用js进行转向另一个服务器的上传文件模块,上传完成后把地址返回并赋值在文本框上,这一块用的是window.open方法,再上传完成后子窗口中赋值给父窗口,在把其他信息填完后提交表单把信息存上。后来因为把文件服务器部署在别地了,就出现了父窗口取不到子窗口返回值的问题了,这是因为js跨域的问题,于是开始找解决方法,看网上说的一方式大多差不多,但我认为那样做不太好,后来看到用jsonp方式,试了一下不适合我的业务,这种方式跨域请求一个方法直接处理完返回值还可以,因为我到文件服务器后会先调出上传页面在上传,因为是springMVC,所以如果用jsonp方式的话,就会返回上传页面的代码了,于是放弃这种方式,后来就把上传的页面也放到本地服务器了,而只是把上传的接收multipart的那部分留在文件服务器,这样就不涉及到父窗口和子窗口跨域的问题,这样就能拿到返回值了,但是还有一个问题,就是在multipart请求到文件服务器时因为请求跨域了,所以http会以options的方式先去做一个安全校验以后才会请求,这就需要在文件服务器中加入filter过滤器,在每个请求上加入如下代码:
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers","User-Agent,Origin,Cache-Control,Content-type,Date,Server,withCredentials,AccessToken");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
这样请求就会到达文件服务器并完成上传,这里上传文件使用的是webuploader,只需要在上传的js文件中把服务器地址设置成远程的就可以完成跨域请求了,其实里边问题挺多,也看了挺多东西,但是文笔有限,写不出来,有碰到相应问题的可以一起探讨。
相关文章推荐
- 用js实现shift+单击来选择多项
- jsp网页在线编辑器
- 修改 mvc webapi 默认返回 json 格式
- 深入浅析JavaScript中对事件的三种监听方式
- 原生js
- Ember.js 入门指南--目录
- js下载图片到本地
- js获取客户端MAC地址
- JavaScript数据属性与访问器属性
- 个人js
- 请用一句话概括JSONP
- js返回顶部
- JavaScript 数组操作
- 10 Super JavaScript Animation Frameworks
- js的几种继承方式
- 在后端是PHP程序的情况下,保持前端Javascript和PHP之间传值的统一编码可以使用以下函数进行处理:
- json转xml
- JavaScript 获取鼠标点击位置坐标
- JS Replace
- 针对淡入淡出的定时轮播效果js