fastDFS+webUploader中遇到的跨域问题

2019独角兽企业重金招聘Python工程师标准>>>

一、什么是跨域访问

    概括来说除了同一域名且同一端口下的请求都属于跨域访问，具体可参考：    

    https://www.html5rocks.com/en/tutorials/cors/

    https://github.com/fex-team/webuploader/issues/135

二、webUpLoader中跨域

     浏览器对于跨域请求，我们会在NetWork里面看见浏览器发送了两次请求，其中第一次是浏览器会先向fastDfs服务（目标服务器）发送一次options请求：

// options的响应，注意和下面允许跨域的结果对比
Response Headers:
Remote Address:ip:host
Request URL:http://ip:port/*****/***/upload
Request Method:OPTIONS   // 此处说明是OPTIONS请求
Status Code:200 OK

        来验证是否支持跨域请求，如果不支持则返回：

XMLHttpRequest cannot load http://ip:/hermes-web/fdfs/upload. 
No 'Access-Control-Allow-Origin'    // 此处证明本次请求为跨域请求
header is present on the requested resource. 
Origin 'http://localhost:8088' is therefore not allowed access.

        上面错误说明浏览器向服务器发送的OPTIONS请求后告知浏览器，服务器不支持跨域请求，无需再发送真正的请求内容了；

        所以，我们现在需要在服务器端配置，使其支持跨域的请求；首先得找到服务器端接收请求的代码位置；一般来说从前台发送的请求都会到filter，所以可以现在我们的filter类中进行允许跨域的配置：

// 必须项，告诉客户端我们支持跨域，值可以是具体的域名也可以是*代表允许所有的服务跨域
response.addHeader("Access-Control-Allow-Origin","*");
// 非必要项，告诉服务器，我们支持跨域的方法
response.addHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS");

        再次请求；出现如下响应，说明服务器端已经允许跨域访问了：    

// options的响应，注意和上面不允许跨域的结果对比
Response Headers:
Access-Control-Allow-Methods:GET,POST,OPTIONS
Access-Control-Allow-Origin:*    //允许访问的域
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control:no-cache
Content-Length:0
Date:Mon, 23 Jan 2017 07:24:28 GMT
Expires:Thu, 01 Jan 1970 00:00:00 GMT
Pragma:No-cache
Server:Apache-Coyote/1.1

三、后记：

       1、对于无法控制跨域请求的服务器时我们可以通过nginx的反响代理进行请求转发以达到跨域的目的，，但由于这一会多一次转发，所以不推荐这一做，具体做法如下：

        http://www.cnblogs.com/gabrielchen/p/5066120.html

        2、对于webUpLoader跨域问题网上的参考做法：        

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

        3、对于阿里云中的跨域：

        需要在对阿里云的请求中未配置允许跨域：

response.addHeader("Access-Control-Allow-Origin","*");// 必须
response.addHeader("Access-Control-Allow-Methods","GET, POST");// 可选

    如有错误，望其指正！

参考地址：

https://github.com/fex-team/webuploader/issues/135

http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/

转载于:https://my.oschina.net/freelili/blog/829658