用webuploader怎么解决跨域上传文件的问题

Posted 2023-03-19

参考技术A 跨域请求前浏览器会自动发出一个options请求，如果服务器的响应头部中有如下信息：
Access-Control-Allow-Origin: #允许访问的源，如http://localhost:3000
Access-Control-Allow-Methods: #允许的方法，如get, post
浏览器收到这个响应就会继续原来的请求，否则就会终止。
在webuploader中可以在uploadBeforeSend的回调中设置请求的头部，例如

uploader.on('uploadBeforeSend', function(obj, data, headers)
_.extend(headers,
"Origin": "http://localhost:3000",
"Access-Control-Request-Method": "POST"
);
);

在服务端的post响应中增加头部：Access-Control-Allow-Origin: http://localhost:3000

webuploader跨域上传

浏览器在跨域请求前会发个options请求来验证是否跨域，所以后端再处理这个options请求时，要告诉浏览器一些信息。

也就是个header信息

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

// options请求就只需要输出头部信息

在处理图片上传的方法里加上，这句，就可以上传图片了