如何从 angularjs 和 CORS 支持将文件上传到球衣

Posted 2023-03-04

【中文标题】如何从 angularjs 和 CORS 支持将文件上传到球衣

【英文标题】：how to upload file to jersey from angularjs and CORS support

【发布时间】：2017-03-17 03:50:51

【问题描述】：

我正在尝试创建上传文件服务。所以我在服务器端关注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);

    

【参考方案1】：

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

【讨论】：

感谢您的快速回复...我知道您添加的链接，我尝试按照第 2.2 节进行操作。我将类 CORSResponseFilter 按原样添加到我的 util 包中并添加 environment.jersey().register(CORSResponseFilter.class) 但不是运气

192.168.200.151 这是您的本地主机服务器吗？或您正在连接的远程服务器？您能否在该链接的第 2.2 节中调试 CORS 过滤器并查看是否被捕获？

192.168.200.151 是我的本地主机服务器。如果我使用调试，我可以在每个请求中看到该类的使用，但我仍然收到错误“XMLHttpRequest 无法加载192.168.200.151:8080/documents/uploadDoc。请求标头字段授权在预检响应中被 Access-Control-Allow-Headers 不允许。”

您介意将其从 ip 地址更改为 localhost。我怀疑这会改变什么，但试一试怎么样？另外你是如何运行服务器应用程序的？像部署在 apache 服务器等？

感谢您的帮助

【参考方案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);

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