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] "OPTIONS /documents/uploadDoc HTTP/1.1" 200 13 "http://localhost:8383/mamagoose/admin/index.html" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like 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

如果您尝试从一个域访问另一个域，则会出现此错误。这是服务器方面的问题。您不需要为角色添加角度的任何标题。您需要在服务器端添加标头。您发出请求的服务器必须实施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

如何实施CORS的示例，因为您正在使用平针织物。 http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/

Answer 2

这是一个难以解决的问题，但如果有人遇到同样的问题，我会尽力帮助别人。

服务器端的第一件事我在我的util包中添加了类

public class CORSResponseFilter implements ContainerResponseFilter {

    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)throws IOException
    {
        MultivaluedMap<String, Object> headers = responseContext.getHeaders();
        headers.add("Access-Control-Allow-Origin", "http://localhost:8383");//TODO:Need to find a replacement
        headers.add("Access-Control-Allow-Credentials", "true");
        //headers.add("Access-Control-Allow-Origin", "http://podcastpedia.org"); //allows CORS requests only coming from podcastpedia.org       
        headers.add("Access-Control-Allow-Methods", "POST, GET, OPTIONS");          
        headers.add("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    }

}

然后我们需要将该类注册为提供者

environment.jersey().register(CORSResponseFilter.class);

此配置为我解决了一个非常大的问题。因为即使我可以发送文件，我也不会得到用户的会话，也无法验证请求，现在一切正常。

如何从angularjs和CORS支持上传文件到泽西

2 个答案: