跨域相關問題

Lycheeee 發布于2019-08-26 13:49 / 927人閱讀

摘要：最近遇到了一個項目，第一次和其他組的后端合作，由于域名也是新申請的，所以在合作過程中遇到了很多跨域的問題。沒有使用的，就是作為后端解決一下這個跨域解決代碼登錄失效問題一域名不一致的跨域提示現象解決辦法設置。

最近遇到了一個項目，第一次和其他組的后端合作，由于域名也是新申請的，所以在合作過程中遇到了很多跨域的問題。現在自己做一下模擬總結。這里我的前端使用的vue，后端使用的express。沒有使用vue的proxyTable，就是作為后端解決一下這個跨域

解決代碼

app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://h5.xesv5.com:8081")
    res.header("Access-Control-Allow-Credentials", true)
    res.header("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,traceid,rpcid")
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
    res.header("Content-Type", "application/json;charset=utf-8")
    if (req.method == "OPTIONS") {
        res.sendStatus(200)
    } else {
        if (req.path.indexOf("/getUserInfo") < 0 && (!req.session || !req.session.userInfo)) {
            res.send({
                stat: 1230,
                message: "登錄失效"
            })
        } else {
            next()
        }
    }
})

問題一：域名不一致的跨域提示 現象：

Response to preflight request doesn"t pass access control check: No "Access-Control-Origin" header is present on the requested resource.

解決辦法：

設置Access-Control-Allow-Orign。我的后端一開始只設置了允許http://pylon.xueersi.com域名，但是沒有帶上端口號，帶上端口號即可。

問題二：后端沒有設置Access-Control-Allow-Credentials

當前端設置withCredentials:true時，表示前端允許跨域的后端接口種cookie

現象：

The value of the "Access-Control-Allow-Crentials" header in the response is "" which must be "true" when the request"s crentials mode is "include". The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

解決辦法：

后端也需要在請求頭設置Access-Control-Allow-Credentials:true

問題三：設置Credentials后，Access-Control-Allow-Origin需要指定域名，不可以設置*

問題四：前端在請求頭上設置了參數，后端需要允許請求頭設置該參數 現象：

Request header field token is not allowed by Access-Control-Allow-Headers in preflight response

解決辦法：

如果前端需要在請求頭里加上token字段，后端這邊需要Access-Control-Allow-Headers設置

 res.header("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,token")

補充:axios請求頭設置參數

config.headers.common["token"] = 123

問題五：協議不同產生的問題 現象：

由于投放出去的鏈接是https的，但是之前我們測試使用的都是http協議的鏈接。后來改成https的時候，提示下面的錯誤：

Mixed Content: The page at "https://xxx.com/#/" was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint. This request has been blocked: the content must be serverd over HTTPS

我的第一反應其實這也是一個跨域的問題，因為一個是http一個是https，后端只允許了http://xx，沒有允許https協議的鏈接，但是報的錯誤是Mixed Content，這算是安全策略的報錯，瀏覽器禁止了https協議訪問http協議的資源和接口，大概是瀏覽器首先檢測到的是這個安全策略的問題。
后來我把所有的接口協議修改為："http://xxx.com/xxx"后，繼續報錯，說明這個時候瀏覽器開始進一步檢測跨域的問題：

Response to preflight request doesn"t pass access control check: The "Access-control-Allow-Origin" header has a value "http://xx.com" that is not equal to the supplied origin.

原因很簡單：就是跨域的Access-Control-Allow-Origin設置的是http協議的，運維老師加上https的就可以。

云服務器 GPU云服務器跨域問題 cdn跨域問題 javascript跨域問題 js跨域問題

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

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

跨域問題匯總

摘要：因為瀏覽器的同源策略，前端開發會遇到各種跨域問題。前言在總結各種跨域問題之前，我們先來了解一下瀏覽器的同源策略。所以只能解決一級域名相同二級域名不同的跨域問題。跨域問題的場景和解決方案多種多樣，只要是做前端開發，總會遇到。而且面試時也是必問的問題。所以自己學習總結記錄一下。因為瀏覽器的同源策略，前端開發會遇到各種跨域問題。本篇文章總結了遇到跨域問題的不同的場景以及對應的解決方案。 ...

MkkHou 2019-08-21 17:46 評論0 收藏0
HTML5 安全問題解析

摘要：本地安全問題在之前引入了本地這個東西，但是后面被廢除了，他的安全點和后臺數據庫的關注點差不多，就是要防止在數據中混入查詢指令。僵尸網絡風險中解決了單線程問題，提出了機制，它為提供多線程支持，但是多線程帶來了一個非常可怕的危險僵尸網絡。 HTML5 安全問題解析標簽： html html5 web安全本文參考： w3school:html5相關基礎知識（w3school.com.c...

maybe_009 2019-08-01 14:51 評論0 收藏0
ajax跨域，這應該是最全的解決方案了

摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0