上傳介面存在跨域

『壹』 請求介面時跨域問題，前端解決方法

在前後端介面請求中，由於瀏覽器的限制，會出現跨域的情況。常用的跨域方案有：

1、JSONP跨域
2、Nginx反向代理
3、伺服器端修改header
4、document.domain
5、window.name
6、postMessage
7、後台配置運行跨域

當一個請求url的 協議、域名、埠 三者之間任意一個與當前頁面url不同即為跨域

特別注意兩點：
1、如果是協議和埠造成的跨域問題「前台」是無能為力的，
2、在跨域問題上，域僅僅是通過「URL的首部」來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。

『貳』 跨域問題解決方法

跨域？他是瀏覽器的 同源策略 造成的，是瀏覽器對javascript施加的安全限制。所謂同源是指：域名、協議、埠均相同。

解決

原理：利用標簽具有可跨域的特性，可實現跨域訪問介面，需要後端的支持。

伺服器在收到請求後，解析參數，計算返還數據，輸出messagetow（data）字元串。

缺點：只能發送get請求，無法訪問伺服器的響應文本（單向請求），即只能獲取數據不能改數據。

通過ajax請求不同域的實現，底層不是靠XmlHttpRequest而是script，所以不要被這個方法給迷惑了。

在ajax請求中類型如果是type是get post，其實內部都只會用get，因為其跨域的原理就是用的動態載入script的src，所以我們只能把參數通過url的方式傳遞

其實jquery內部會轉化成

http://192.168.31.137/train/test/jsonpthree?callback=messagetow

然後動態載入http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"><script type="text/javascript" src=" http://192.168.31.137/train/test/jsonpthree?callback=messagetow "></script>

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術的規范，提供了 Web 服務從不同域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，確保安全的跨域數據傳輸。現代瀏覽器使用CORS在API容器如XMLHttpRequest來減少HTTP請求的風險來源。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。伺服器一般需要增加如下響應頭的一種或幾種：

跨域請求默認不會攜帶Cookie信息，如果需要攜帶，請配置下述參數：

​window.name通過在iframe（一般動態創建i）中載入跨域HTML文件來起作用。然後，HTML文件將傳遞給請求者的字元串內容賦值給window.name。然後，請求者可以檢索window.name值作為響應。

iframe標簽的跨域能力；

window.name屬性值在文檔刷新後依舊存在的能力（且最大允許2M左右）。

每個iframe都有包裹它的window，而這個window是top window的子窗口。 contentWindow 屬性返回<iframe>元素的Window對象。你可以使用這個Window對象來訪問iframe的文檔及其內部DOM。

​ HTML5新特性，可以用來向其他所有的 window 對象發送消息。需要注意的是我們必須要保證所有的腳本執行完才發送 MessageEvent，如果在函數執行的過程中調用了它，就會讓後面的函數超時無法執行。

​ 前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，埠都要一致，否則無法利用document.domain進行跨域，所以只能跨子域

​ 在 根域 范圍內，允許把domain屬性的值設置為它的上一級域。例如，在」aaa.xxx.com」域內，可以把domain設置為 「xxx.com」 但不能設置為 「xxx.org」 或者」com」。

​ 現在存在兩個域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的頁面，由於其document.name不一致，無法在aaa下操作bbb的js。可以在aaa和bbb下通過js將document.name = 'xxx.com';設置一致，來達到互相訪問的作用。

WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通信，同時允許跨域通訊，是server push技術的一種很棒的實現。相關文章，請查看： WebSocket 、 WebSocket-SockJS

**需要注意：**WebSocket對象不支持DOM 2級事件偵聽器，必須使用DOM 0級語法分別定義各個事件。

同源策略是針對瀏覽器端進行的限制，可以通過伺服器端來解決該問題,例如nginx

DomainA客戶端（瀏覽器） ==> DomainA伺服器 ==> DomainB伺服器 ==> DomainA客戶端（瀏覽器）

『叄』 上傳文件時出現跨域問題

一個新的奇葩問題：前端報跨域出錯，原因卻在後台上傳的文件超過了Tomcat限制。

前端報錯

後端日誌

所以啊，這根本不是跨域的問題， Tomcat默認上傳的文件大小就是1MB ，你上傳的文件超過而已。

你可以在前端配置一下文件大小限制，

例如

或者在後端設置上傳文件大小限制

以SpringBoot為例

在application.yml中添加配置