現象

首先，在生產環境中，由于進行編輯圖片時，將圖片回顯到ReactCrop組件中進行可裁剪編輯，然而回顯時，需要將圖片轉化為base64的格式或者blob對象, 此時需要將圖片次繪制成canvas進行裁剪，但是，就會出現圖片的跨域問題，圖片不在一個域下的話，使用 canvas 會污染畫布，所以就不行啦！！！！
不過這個其實是需要后端在服務端進行配置就好了，但是前端要硬抗的話，那只能含著淚解決吧！

解決方案一

因為在本地進行圖片回顯的時候就已經跨域了，所以為了保證在同一域的環境進行處理圖片顯示的問題。

Mac

• 設置打開Chorme跨域瀏覽器指令：

注意： 運行命令之前，必須得徹底關閉當前chorme瀏覽器。
例如：open -n /Applications/Google Chrome.app/ --args --disable-web-security --user-data-dir=/Users/gml/MyChromeDevUserData/

Windows

• Chrome 49 以后版本

• 完整例子

• 創建 Chrome 快捷方式，在目標一欄后面添加參數即可

以上是設置跨域瀏覽器的教程。下面回歸正題

以上的原始代碼在在轉化base64時，需要canvas重繪圖片，進行生成base64圖片格式進行接收，也就是toDataURL()是canvas對象的一種方法，用于將canvas對象轉換為base64位編碼,但是出現是canvas.tuDataUrl的跨域問題。

• 將圖片轉換為base64位編碼有什么好處？

1、將圖片轉換為base64位編碼后，圖片會跟隨代碼（html、css、js）一起請求加載，不會再單獨進行請求加載； 2、可以防止由于圖片路徑錯誤導致圖片加載失敗的問題；

使用canvas.toDataUrl跨域的解決方式就是在設置img.crossOrigin = “Anonymous”; 方法。然后在服務器端設置請求頭"Access-Control-Allow-Origin": “*”。然而在生產環境并無效果。所以避開canvas的跨域問題只能重新更換方案。

補充：

• img元素中的crossorigin屬性

img是我們在web開發中比較常用的一個標簽，它代表著文檔中的一個圖像元素。HTML5給這個標簽新增加了一個crossorigin屬性，這個屬性決定了圖片獲取過程中是否開啟CORS功能

使用場景

在最近的項目開發中，在前端預覽圖片并讓用戶裁剪，再將裁剪好的圖片上傳到后端的服務器上。這里輸入的圖片地址很有可能來自第三方站點，這就涉及到一個跨域的問題，如果僅僅是展示預覽圖片的話是沒有什么問題的，但這里裁剪圖片時需要將裁剪好的圖片進行base64編碼，如果沒有使用crossorign開啟CORS功能的話，在使用canvas的toBlob()、toDataURL()和getImageData()方法時就會出現跨域的問題。

crossorigin屬性

這個屬性有兩個值可選：
anonymous：如果使用這個值的話就會在請求中的header中的帶上Origin屬性，但請求不會帶上cookie和其他的一些認證信息。
use-credentials：這個就同時會在跨域請求中帶上cookie和其他的一些認證信息。
在使用這兩個值時都需要server端在response的header中帶上Access-Control-Allow-Credentials屬性。

雖然 已經設置但是在生產環境還未生效。這可能是后端的鍋了，不過后端一直沒有改好的情況下，前端只能硬著頭皮去抗下啦。還好經過百般嘗試后，出來了解決方案：

以上代碼通過axios請求圖片路徑并且加上請求頭的條件，然后返回結果生成Blob對象，然后再創建 URL 的blob對象，賦值到裁剪的組件里進行實時裁剪。

總結：

以上嘗試的結果，也是避開canvas的跨域問題，另起爐灶開辟了新的方案，才解決了跨域的根本問題。不過解決辦法還有其他方式，后續可以深入研究

以上解決的問題中涉及的知識點也蠻多的：

canvas的toDataUrl跨域問題canvas的toDataUrl跨域問題

crossorigin屬性 crossorigin

Cross-Origin Resource Sharing（CORS）解決方案CORS

axios的請求方式 axios

toDataURL()方法 toDataURL()方法

原作者姓名：G294992891
原出處：CSDN
原文鏈接：項目中的圖片跨域問題解決方式_G294992891的博客-CSDN博客

總結

以上是生活随笔為你收集整理的ssm把图片保存到项目中_项目中的图片跨域问题解决方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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