java - 如何从 angularjs 和 CORS 支持将文件上传到 Jersey

Question

我正在尝试创建上传文件服务。所以我正在关注 the guide here对于服务器端。和 the guide here对于客户端。

但我在浏览器上收到该错误

XMLHttpRequest cannot load http://192.168.200.151:8080/documents/uploadDoc. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.

服务器上出现此错误
192.168.200.151 - - [03/Nov/2016:13:44:59 +0000] “选项/documents/uploadDoc HTTP/1.1” 200 13 “http://localhost:8383/mamagoose/admin/index.html html""Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, 如 Gecko) Chrome/54.0.2840.71 Safari/537.36"3.

我知道我有 CORS 支持问题，但我不知道如何克服它。我尝试使用此依赖项编辑我的 pom.xml 但没有成功。

这一定是我想念的东西，有人知道吗？

<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter -->
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

客户端

  uploadfile : function(action, files, success, error){

        var url = webServiceModuleAddress+"/uploadDoc";

        for ( var i = 0; i < files.length; i++)
        {
            var fd = new FormData();
            fd.append("file", files[i]);

            $http.post(url, fd, {

                withCredentials : false,

                headers : {
                    'Content-Type' : undefined
                    },
                    transformRequest : angular.identity
                   })
                   .success(function(data)
                   {
                    console.log(data);
                   })
                   .error(function(data)
                   {
                    console.log(data);
                   });
       }
    },

服务器端

@POST
@Path("/uploadDoc")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public String uploadFile(@Context HttpServletRequest req, @QueryParam("callback") String callback,@FormDataParam("file") InputStream fileInputStream,@FormDataParam("file") FormDataContentDisposition contentDispositionHeader) throws JsonProcessingException 
{
    try{
        if(SessionManager.isUserConnected(req))
        {
            String filePath = SERVER_UPLOAD_LOCATION_FOLDER + contentDispositionHeader.getFileName();
            // save the file to the server
            documentsDao.saveFile(fileInputStream, filePath);
            String output = "File saved to server location : " + filePath;
            return ResourceResponse.getResourceJsonString(output, callback, "true", ErrorMessageEnum.SUCCESS);
        }
        else
        {
            return ResourceResponse.getResourceFailResponseString(callback, ErrorMessageEnum.USER_NOT_CONNECTED);
        }

    }catch(Exception e)
    {
        e.printStackTrace();
        return ResourceResponse.getResourceFailResponseString(callback, ErrorMessageEnum.FAILURE);

    }
}

Answer 1

如果您尝试从一个域访问另一个域，则会出现此错误。这是服务器端的问题。您不需要在 Angular 中为 cors 添加任何 header 。您需要在服务器端添加 header 。您发出请求的服务器必须实现 CORS，以授予 JavaScript 从您的网站访问的权限。

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

请参阅此链接，了解如何实现 - https://www.w3.org/wiki/CORS_Enabled

由于您使用的是 Jersey ，因此如何实现 CORS 的示例。 http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/