国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

跨域相關(guān)問題

Lycheeee / 935人閱讀

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

最近遇到了一個項目，第一次和其他組的后端合作，由于域名也是新申請的，所以在合作過程中遇到了很多跨域的問題。現(xiàn)在自己做一下模擬總結(jié)。這里我的前端使用的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()
        }
    }
})
問題一：域名不一致的跨域提示 現(xiàn)象：

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

解決辦法：

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

問題二： 后端沒有設(shè)置Access-Control-Allow-Credentials

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

現(xiàn)象：

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

解決辦法：

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

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

問題四：前端在請求頭上設(shè)置了參數(shù)，后端需要允許請求頭設(shè)置該參數(shù) 現(xiàn)象：

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

解決辦法：

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

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

補充:axios請求頭設(shè)置參數(shù)

config.headers.common["token"] = 123
問題五：協(xié)議不同產(chǎn)生的問題 現(xiàn)象：

由于投放出去的鏈接是https的，但是之前我們測試使用的都是http協(xié)議的鏈接。后來改成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

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

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設(shè)置的是http協(xié)議的，運維老師加上https的就可以。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109597.html

相關(guān)文章

  • 跨域問題匯總

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

    MkkHou 評論0 收藏0

  • HTML5 安全問題解析

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

    maybe_009 評論0 收藏0

  • ajax跨域，這應(yīng)該是最全的解決方案了

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

    ytwman 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<