XMLHttpRequest加进度事件的跨域上传文件问题

薛小杰 2016-06-22 11:13:04

我已经用XMLHttpRequest实现了跨域的文件上传，但只要加上　xhr.upload.onprogress 进度事件就会又出现跨域问题，请知道怎么解决。

...全文

1882 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

szuzsq 2018-06-26

打赏
举报

Access-Control-Allow-Origin

引用 11 楼 qq_34981378 的回复:

原因是：403 OPTIONS请求方式不存在。

我是php的,我只要一个头,好像没什么问题



header('Access-Control-Allow-Origin: *');

szuzsq 2018-06-26

打赏
举报

引用 6 楼 wondaymh 的回复:

最烦这种傻逼，问了一大堆，最后一句我解决了就完了！

所以应该出一个评价系统?这种SB可能就再也得不到别人的回复了

程序员中的公路赛车手 2018-06-19

打赏
举报

原因是：403 OPTIONS请求方式不存在。

程序员中的公路赛车手 2018-06-19

打赏
举报

完美解决办法步骤：
1.在web.xml添加：

<filter>
<filter-name>cors</filter-name>
<filter-class>com.janms.controllers.MyCORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
2.写对应的filter类：
package com.janms.controllers;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
public class MyCORSFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {

}

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
//String origin = (String) servletRequest.getRemoteHost()+":"+servletRequest.getRemotePort();
//System.out.println("origin:"+origin);
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
response.setHeader("Access-Control-Allow-Credentials","true");
filterChain.doFilter(servletRequest, servletResponse);
}

@Override
public void destroy() {

}
}
3.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<script type="text/javascript" src="/static/js/jquery.js"></script>
<title>Upload Files using XMLHttpRequest - Minimal</title> <style>
#progress{
height:10px;
width:500px;
border: 1px solid gold;
position: relative;
border-radius: 5px;
}
#progress .progress-item{
height:100%;
position: absolute;
left:0;
top:0;
background: chartreuse;
border-radius: 5px;
transition: width .3s linear;
}
</style>
</head>
<body>
文件上传框<br>
<input type="file" id="file"><br>
显示进度条<br>
<div id="progress">
<div class="progress-item"></div>
</div>
上传成功后的返回内容<br>
<span id="callback"></span>
</body>
<script>
$("#file").on("change",function(){
var fileObj = $("#file")[0].files[0]; // js 获取文件对象
var form = new FormData(); // FormData 对象
form.append("file", fileObj); // 文件对象
$.ajax({
url: 'http://www.*****.com:8080/phone/uploadupgradefile',
type: 'post',
data: form,
async:true,
processData: false, //用来回避jquery对formdata的默认序列化，XMLHttpRequest会对其进行正确处理
contentType: false, //设为false才会获得正确的conten-Type
dataType:'json', //返回类型，有json，text，HTML。这里并没有jsonp格式，所以别妄想能用jsonp做跨域了。
xhr: function() { //用以显示上传进度
var xhr = $.ajaxSettings.xhr();
if(xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = Math.floor(event.loaded / event.total * 100);
document.querySelector("#progress .progress-item").style.width = percent + "%";
}, false);
}
return xhr
},
success: function(data) {
alert(data.image);
}
})
});
</script>
</html>
4.上传类自己写，万一不会的加QQ:645990269.
5.重启服务器。
6.效果：

&君莫问 2018-04-08

打赏
举报

[b]你好，请问能否在springmvc中直接继承httpServlet, 然后覆盖这个doOptions方法？

Ruabit 2017-10-12

打赏
举报

鉴于lz只提问，自己解决，而不说解决方案的逗比行为，我给后来的人留点干货：
1问题起因：
ie和edge浏览器在调用xhr.upload.onprogress进度事件时，仍然只会发送post或者get请求，
但是火狐等高端一点的浏览器会将其视为跨域问题，并在post或者get请求之前，自动发出一个option请求
那么坑爹的就是，后台不解决option，后续新的请求就不会得到响应。
2解决方案：
后台处理option请求就行，我看能不能个截图