1. 程式人生 > >POST方式跨域上傳檔案

POST方式跨域上傳檔案

JSONP請求有限制: 第一,不能跳出兩層, 第二,不支援POST. 

往往解決跨域POST請求的方案是個"古老"方法, 請求同域下的iframe.

伺服器端: 

需要附加頭資訊:

  1. header('Access-Control-Allow-Origin: *');  
  2. header('Access-Control-Allow-Methods: POST');  
  3. header('Access-Control-Max-Age: 1000');  
返回帶有CALLBACK的串:
  1. <script type='text/javascript'>document.domain=
    'xxx.com';Callback({"ret":0,"error":"xxx","data":null});</script>  
這裡要注意,這裡的 document.domain='xxx.com';這個domain是伺服器端和前端都要定義的.

前端:

  1. <section>  
  2.     <form name="data_upload" action="http://request.com" method="post" target="upload_frame" onsubmit="return initUpload(this)" enctype="multipart/form-data"
    >  
  3.        ......  
  4.     <iframe src="" id="upload_frame" name="upload_frame" style="display: none"></iframe>  
  5. </section>  

  1. <script>  
  2. function initUpload(formEle) {  
  3.    ....  
  4.    document.domain='xxx.com';  
  5.    document.forms['data_upload'].submit();  
  6. }  
  7. </script> 

相關推薦

POST方式檔案

JSONP請求有限制: 第一,不能跳出兩層, 第二,不支援POST.  往往解決跨域POST請求的方案是個"古老"方法, 請求同域下的iframe. 伺服器端:  需要附加頭資訊: header('Access-Control-Allow-Origin: *

個人經歷分享:一步一步實現vue+element+nodejs實現檔案

作者是一名一年多前端小白,最近公司新的需求,實現了這樣一個功能,將心路歷程一步一步記下來。 首先是前端整體框架是vue2.x+elementUI+nodejs(koa) 搭建的這樣一個專案 第一步: 要實現檔案上傳,首先想到的是表單上傳,OK,那麼沒問題,ele

jQuery的uploadify外掛實現檔案

1、jQuery的uploadify外掛官網地址: http://www.uploadify.com/documentation/ 2、按照官網要求下載指定的js,css程式碼與swf檔案 <script src="uploadify/jquery.uploadi

JSP Ueditor 實現圖片

img 上傳 .com 圖片 地址 ued 跨域 image con Ueditor的單圖上傳,在官方文檔上明確寫了不支持 然後通過百度找了許多方案,終於有一個可以解決了。 http://www.cnblogs.com/hpnet/p/6290452.html 不

ueditor富文本編輯器圖片解決辦法

etop cee 訪問 第一步 支持 fun 初始化 處理 顯示 在使用百度富文本編輯器的過程中,如果是有一臺單獨的圖片服務器就需要將上傳的圖片內容放到圖片服務器,也就是比如在a.com的編輯器上傳圖片,圖片要保存到img.com的跨域上傳圖片功能,而在ueditor官方文

GO語言Beego框架之WEB安全小系統(5)目錄檔案漏洞

跨目錄上傳檔案漏洞 攻擊原理 絕對路徑名或者相對路徑名中可能會包含檔案連結(例如:軟連結、硬連結、快捷方式、影子檔案、別名等),或者包含特殊字元(例如:.與..),這使得驗證檔案路徑變得困難;同時還有很多作業系統和檔案系統相關的命名約定,也增加了驗證檔案路

ueditor富文字編輯器圖片解決辦法

在使用百度富文字編輯器的過程中,如果是有一臺單獨的圖片伺服器就需要將上傳的圖片內容放到圖片伺服器,也就是比如在a.com的編輯器上傳圖片,圖片要儲存到img.com的跨域上傳圖片功能,而在ueditor官方文件中說不支援單圖上傳的跨域, 網上查了一下各種花裡胡哨,一頓操作猛如虎,比如加document.dom

vue+elemenui 圖片

.vue 檔案 主要注意這兩個: action 請求的地址。直接請求介面https://… 由於同源策略會出現跨域問題,需要後面配置代理,使本地可以跨域請求介面。 name 表單name值 <temeplate> <el-uplo

php後端控制可的域名,允許圖片

跨域問題經常需要面對,前端需要做的比較直接 要麼選擇ajax非同步提交,XML或者jsonp,要麼表單提交 jsonp基本可以搞定大部分跨域問題,但問題也比較明顯,只能通過get方式提交 並且jsonp是通過把引數拼到URL上提交請求的 但是所有瀏覽器有URL長

關於使用百度編輯器(ueditor編輯器)將圖片到獨立伺服器的問題

最近公司要使用ueditor編輯器,但是關於跨域上傳的問題,出現了很多不可預料的錯誤,一次次的除錯,一個個的坑,現在終於完成了,把過程寫下來分享給大家,希望大家支援,因為我在百度上查了很久,也沒有找到一個合適的。 首先本地使用ueditor編輯器,這個自己百度,這裡就不多說

使用 base64 解決

跨域上傳檔案是一件讓人頭疼的事情,不過今天我們可以用一種簡單的方法解決。直接上程式碼! 需要 js 檔案 (function () { window.onload = functi

php 之圖片 (smallnews筆記)

因為要將所有上傳的圖片上傳到一臺獨立的圖片伺服器上面,js上傳時存在跨域問題,網上找到這種,通過php curl方式,將圖片重新發送到另外一臺伺服器上儲存,並返回圖片路徑! 這種方式存在一定問題: 1,上傳大圖片時,比

mac/linux/centos通過 ssh [email protected]方式連線如何檔案都阿里雲

目錄1、mac上傳檔案到Linux伺服器scp 檔名 使用者名稱@伺服器ip:目標路徑如:scp /Users/test/testFile [email protected]:/test/2、mac上傳資料夾到Linux伺服器,與上傳檔案相比多加了-rscp -r

Uploadify

Uploadify本質上是一個基於Flash的jQuery上傳外掛.  怕忘記了,所有轉過來了 注:HTML5 寫好了,通過phonegap打包成APK後 發現檔案上傳無法使用 HTML5是相對路徑, apk裡必須是絕對路徑訪問外網伺服器的。 1、JQUERY

java用ajax實現圖片

說明 : 圖片伺服器是用Nginx搭建的,用的是Php語言 這個功能 需要 用到兩個js檔案: jquery.js和jquery.form.js <script type="text/javascript" src="js/jquery.js"></scr

Kindeditor圖片正確修改方法

Kindeditor一般呼叫方式 var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="控制元件Name"]', { uploadJson: ' http://img.c

js實現非同步

無聊寫點東西,希望對一些朋友有用,先上程式碼 這是前端程式碼 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>&l

系列五、springMVC實現檔案伺服器檔案

一、實現檔案上傳 專案目錄如下所示 一、匯入依賴和配置springmvc.xml、web.xml 這個兩個jar

httpclient:與springmvc進行傳輸,檔案,攜帶引數——使用HttpPost方式

一.上傳檔案1.HttpClient類/** * @param file * @param url */ public static void uploadFileByHttpPost(File file, String url) { CloseableHt

AJAX POST方式檔案到後臺和下載後臺傳來的檔案

ajax 下載 原本ajax是不能下載檔案的,原因:因為response,一般請求瀏覽器是會處理伺服器輸出的response,例如生成png、檔案下載等,然而ajax請求只是個“字元型”的請求,即請求的內容是以文字型別存放的。檔案的下載是以二進位制形式進行的,雖然可以讀取到返