Html 5 ajax 의 크로스 도 메 인 요청

1. XML HttpRequest 업그레이드 버 전 은 도 메 인 간 요청 을 실 현 했 습 니 다.하지만 배경 에 설정 해 야 합 니 다: header ("Access - Control - Allow - Origin:"http://www.a.com");도 메 인 에서 도 메 인 접근 을 허용 합 니 다.
2, IE: XDomainRequest () 를 사용 해 야 합 니 다.마찬가지 로 배경 에 설정 해 야 합 니 다: response. addHeader ("Access - Control - Allow - Origin", "*");
3. 배경 언어 가 자바 라면 크로스 도 메 인 필 터 를 직접 써 야 합 니 다. 필터 에 도 메 인 접근 을 설정 해 야 합 니 다. 그렇지 않 으 면 업로드 에 성공 하지 못 합 니 다.
다음은 ajax 파일 업로드 의 예 를 들 어 도 메 인 문 제 를 설명 합 니 다.
프론트 코드:

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6     head>
 7     <body>
 8         <form action="" method="post" onsubmit="return false;">
 9             <input type="file" name="myFile" id="myFile" value=""/>
10             <input type="button" id="btn" value="  " /><br />
11         form>
12         <progress id="progress" max="100" value="0" style="margin-top:10px;">progress>
13     body>
14 html>
15 <script type="text/javascript">
16     window.onload = function(){
17         var oBtn = document.getElementById("btn");
18         var oFile = document.getElementById("myFile");
19         var oProgress = document.getElementById("progress");
20         oBtn.onclick = function(){
21             if(oFile.files.length <=0)return;
22             //TODO:           
23             var formData = new FormData();
24             formData.append("file",oFile.files[0]);
25             
26             var xhr = new XMLHttpRequest();
27             xhr.upload.onprogress = function(ev){
28                 ev = ev || window.event;
29                 if(ev.lengthComputable)oProgress.value = parseInt(ev.loaded/ev.total*100);
30             }
31             xhr.upload.onload = function(){
32                 oProgress.value = 100;
33             }
34             xhr.open("POST","http://127.0.0.1:8080/ajax5.do",true);
35             xhr.send(formData);
36         }
37         
38     }
39 script>

배경 코드:

 1 package com.sgepit.ajax;
 2 
 3 import java.io.File;
 4 import java.io.IOException;
 5 import java.util.List;
 6 import java.util.UUID;
 7 
 8 import javax.servlet.ServletException;
 9 import javax.servlet.annotation.WebServlet;
10 import javax.servlet.http.HttpServlet;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13 import javax.servlet.http.HttpSessionContext;
14 
15 import org.apache.commons.fileupload.FileItem;
16 import org.apache.commons.fileupload.disk.DiskFileItemFactory;
17 import org.apache.commons.fileupload.servlet.ServletFileUpload;
18 
19 
20 /**
21  * @author tengri
22  *    
23  */
24 @SuppressWarnings("all")
25 @WebServlet("/ajax5.do")
26 public class Ajax5 extends HttpServlet {
27 
28     @Override
29     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
30         this.doPost(req, resp);
31     }
32     
33     @Override
34     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
35         DiskFileItemFactory factory = new DiskFileItemFactory();
36         factory.setSizeThreshold(2014 * 1024);
37         factory.setRepository(new File("D:/uploadTemp"));
38         ServletFileUpload upload = new ServletFileUpload(factory);
39         resp.setCharacterEncoding("utf-8");
40         try {
41             List items = upload.parseRequest(req);
42             for(FileItem item : items){
43                 if(!item.isFormField()){
44                     //   
45                     String fileName = item.getName();
46                     System.out.println(new String(fileName.getBytes(),"utf-8"));
47                     fileName = new String(fileName.getBytes(),"utf-8");
48                     //      
49                     String fileEnd = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
50                     //      
51                     StringBuffer sbRealPath = new StringBuffer();
52                     sbRealPath.append("D:/uploadFile/").append(fileName);
53                     File file = new File(sbRealPath.toString());
54                     item.write(file);
55                 }
56             }
57         } catch (Exception e) {
58             e.printStackTrace();
59         }
60     }
61 
62 }

필터:

package com.sgepit.ajax;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

/**
 * @author tengri
 *  filter
 */
public class CrossDomainFilter implements Filter{

    public void destroy() {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) resp;
        //          ，             ，         ："http://www.baidu.com,http://google.com"
        res.setHeader("Access-Control-Allow-Origin", "*");
        res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
        res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With");
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig arg0) throws ServletException {
        
    }
}

웹. xml 설정 필터:

1 <filter>
2       <filter-name>myFilterfilter-name>
3       <filter-class>com.sgepit.ajax.CrossDomainFilterfilter-class>
4   filter>
5   <filter-mapping>
6       <filter-name>myFilterfilter-name>
7       <url-pattern>/*url-pattern>
8   filter-mapping>

다음으로 전송:https://www.cnblogs.com/tengri/p/5565875.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Html 5 ajax 의 크로스 도 메 인 요청

좋은 웹페이지 즐겨찾기