vue+java實現文件上傳(excel等)，會出現跨域問題，直接用form表單提交就不會有問題了(new FormData())

地址：https://www.cnblogs.com/muscles/p/9503103.html

一：首先說一下什么是跨域，跨域就是解決瀏覽器同源策略的問題。

那話又說回來了，什么是同源策略呢，(名詞解釋：同源策略(Same origin policy)是一種約定，它是瀏覽器最核心核心也最基本的安全功能，缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。)? 簡單來說同源策略就是為了保證用戶信息安全，放著竊取數據從而禁止不同域之間的js 交互的。

那什么情況是不同域呢？

1.域名不同，

2.域名相同端口不同

3.協議不同

其上有一點不同為跨域。那么我們有時前后端分離又不得不對跨域進行處理

二：跨域解決方法主要包括

1.jsonp? 2.CORS是跨源資源分享(Cross-Origin Resource Sharing)的縮寫，現在對于這兩種方法的使用文章一大摞，不多贅述

三：下面是我使用vue el-upload 上傳文件遇到的跨域問題

作為一名php 程序員臨時修改之前使用的項目，正好前端使用的vue ,從來沒有使用過vue,當時vue對接的是ci框架寫的接口，需要轉移至tp5.1框架的接口。一個神奇的現象就是在Ci框架可以使用，在tp5.1框架的接口就涉及到跨域問題

這是我使用的上傳方法，立即上傳，就出現了下面的情況，而且后臺也能接收到文件且size 也存在，但是你會發現當你進行下一步操作是都會報跨域問題，這種情況令我很是頭疼，尋遍網絡發現沒有針對這個問題的解決方法，而且我在ci寫的接口上沒有類似的問題，如下圖

主要看下面這張圖，主要看請求類型，根本就不是上傳文件的類型，我最后尋找了vue群里的一位大神，他看后跟我說你懂不懂啊，表單是沒有跨域問題的，我把圖截給他，還是這樣的回答，而且說他也用el-upload 上傳沒有問題，好吧！！看來問題還是的自己解決。

后來我就給vue 加了個請求頭 上傳文件的頭multipart/form-data 上傳報邊界丟失

后來想到了一個方法，form 上傳是沒有跨域問題的，那我就把他改變成form 上傳，el-upload 的:before-upload=”beforeUpload”?上傳前執行

在該方法里// console.log(file)//這里是重點，將文件轉化為formdata數據上傳

let fd?= new?FormData()

fd.append(‘file’,?file)

this.$http.post(‘http://localhost/j030_picc_ceshi/public/weixin/index/upload_img’, fd).then((res)?=> {

}, (res)?=> {

console.log(res)

})

return false

在該方法里直接創建form 元素執行上傳? 下面return false 組織執行下面的操作，發現這樣上傳可以完美解決以上出現的問題

*********************重點在這里*************************

其實之所以出現以上的問題，使我忽略了跨域執行的邏輯導致的！！！ 那么跨域又執行什么邏輯呢，眾所周知跨域分為簡單請求和復雜請求，到我們設置了請求頭后，請求就變成復雜請求了，如下：復雜請求

axios({

headers:{

Accept:'application/json',

Authorization:k

}

})

那么復雜請求的時候，瀏覽器會首先發送了一個options請求，去驗證服務器是否允許，然后在發送真正的請求，這是后臺就需要設置支持的動作

header(‘Access-Control-Allow-Origin:*’);? //不推薦*

header(‘Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE’); //支持的http動作

header(‘Access-Control-Allow-Headers:x-requested-with,content-type’); ?//響應頭

而我出現的問題就是，沒有做options 判斷返回或過濾掉，而是直接接受獲取，導致接受到的文件為空報錯。

所以正確的做法應該是直接做options頭判斷，返回就可以了。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。