前端上傳到服務端報錯'Access-Control-Allow-Origin'

flyer_dev 發布于2019-08-22 18:47 / 903人閱讀

摘要：問題與解決辦法前端攜帶憑證信息請求服務端接口，當后臺這樣設置時，遇到報錯，不能為當請求的證書模式為時這是你的請求沒有通過的原因這個證書模式初始化是通過的屬性控制的雖然有報錯，但請求數據是成功的。

問題與解決辦法

前端攜帶cookie憑證信息請求服務端接口，當后臺"Access-Control-Allow-Origin":*這樣設置時，遇到報錯，

Access-Control-Allow-Origin不能為 * ,當請求的證書模式為“include”時
這是你的請求沒有通過的原因
這個證書模式初始化是通過Ajax的withCredentials屬性控制的

雖然有報錯，但請求數據是成功的。只不過請求成功之后的操作無法進行下去

要解決這個報錯問題，前端需要對withCredentials參數設置 withCredentials: false,

 this.$axios({
    method: "post",
    url:"http://upload-z2.qiniup.com/",         // 七牛云的上傳地址，根據自己所在地區選擇，我這里是華南區
    headers: {
        "Content-Type": "multipart/form-data"
    },
    withCredentials: false,
    data:formdata
}).then((res)=>{
    console.log(res.data)

})

敲黑板，知識點：

后臺用session記錄的用戶登錄
1、前端發出的請求如果是攜帶Cookie身份信息

2、服務端的Access-Control-Allow-Origin如果設置的是*

那么這個請求會失敗，在Options預請求時會被攔截下來。

參考文獻

MDN文檔：
https://developer.mozilla.org...

云服務器 GPU云服務器文字自動&039&039到google 域名服務器端口&039&039 attr&039&039checked&039&039 given&039&039

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96196.html

You don&#039;t know cross-origin

摘要：為什么會存在跨域問題同源策略由于出于安全考慮，瀏覽器規定不能操作其他域下的頁面，不能接受其他域下的請求不只是，引用非同域下的字體文件，還有引用非同域下的圖片，也被同源策略所約束只要協議域名端口有一者不同，就被視為非同域。 showImg(https://segmentfault.com/img/remote/1460000017093859?w=1115&h=366); Why 為什么...

hersion 2019-08-26 13:25 評論0 收藏0
SVN更新報錯問題（Please execute the &#039;Cleanup&#039; c

摘要：問題描述在更新的過程中，可能中途會取消，取消之后再次更新時可能提示，如下圖下載工具，進入此下載地址將文件解壓縮到目錄的同級目錄打開命令行工具，切換到的同級目錄，執行如下命令該命令可以查看當前掛起的操作該命令可以刪除當前掛起的操作執行刪除后再問題描述在更新svn的過程中，可能中途會取消，取消之后再次更新時可能提示，如下圖： showImg(https://segmentfault.c...

hqman 2019-08-16 12:18 評論0 收藏0
react用子組件(有RouteComponentProps)報錯：&#039;match&#039

摘要：因為子組件有，所以在父組件中引用需要傳相應的屬性。但考慮到如果層級較深的話一層一層傳就很麻煩。而如果我們用組件引用的話就會很簡單，只需要在需要子組件的地方用的屬性就可以了手機號因為子組件有RouteComponentProps，所以在父組件中引用需要傳相應的屬性。但考慮到如果層級較深的話一層一層傳就很麻煩。而如果我們用route組件引用的話就會很簡單，只需要在需要子組件的地方用rou...

wangjuntytl 2019-08-26 13:53 評論0 收藏0
canvas.toDataURL(&#039;image/png&#039;)報錯處理方法

摘要：前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是用來做轉換獲取視頻的一個截圖，添加到頁面中，達到自動添加預覽圖的目的。前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是：用canvas.toDataYRL();來做轉換獲取視頻的一個截圖，添加到頁面中，達到自動添加預覽圖的目的。部分代碼如下： var testVideo = document....

idisfkj 2019-08-21 15:55 評論0 收藏0