成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

跨域相關(guān)問(wèn)題

Lycheeee / 1018人閱讀

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

最近遇到了一個(gè)項(xiàng)目，第一次和其他組的后端合作，由于域名也是新申請(qǐng)的，所以在合作過(guò)程中遇到了很多跨域的問(wèn)題?，F(xiàn)在自己做一下模擬總結(jié)。這里我的前端使用的vue，后端使用的express。沒(méi)有使用vue的proxyTable，就是作為后端解決一下這個(gè)跨域

解決代碼 
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()
        }
    }
})
問(wèn)題一：域名不一致的跨域提示 現(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。我的后端一開(kāi)始只設(shè)置了允許http://pylon.xueersi.com域名，但是沒(méi)有帶上端口號(hào)，帶上端口號(hào)即可。

問(wèn)題二： 后端沒(méi)有設(shè)置Access-Control-Allow-Credentials

當(dāng)前端設(shè)置withCredentials:true時(shí)，表示前端允許跨域的后端接口種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

解決辦法：

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

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

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

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

解決辦法：

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

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

補(bǔ)充:axios請(qǐng)求頭設(shè)置參數(shù)

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

由于投放出去的鏈接是https的，但是之前我們測(cè)試使用的都是http協(xié)議的鏈接。后來(lái)改成https的時(shí)候，提示下面的錯(cuò)誤：

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)其實(shí)這也是一個(gè)跨域的問(wèn)題，因?yàn)橐粋€(gè)是http一個(gè)是https，后端只允許了http://xx，沒(méi)有允許https協(xié)議的鏈接，但是報(bào)的錯(cuò)誤是Mixed Content，這算是安全策略的報(bào)錯(cuò)，瀏覽器禁止了https協(xié)議訪(fǎng)問(wèn)http協(xié)議的資源和接口，大概是瀏覽器首先檢測(cè)到的是這個(gè)安全策略的問(wèn)題。
后來(lái)我把所有的接口協(xié)議修改為："http://xxx.com/xxx"后，繼續(xù)報(bào)錯(cuò)，說(shuō)明這個(gè)時(shí)候?yàn)g覽器開(kāi)始進(jìn)一步檢測(cè)跨域的問(wèn)題：

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.

原因很簡(jiǎn)單：就是跨域的Access-Control-Allow-Origin設(shè)置的是http協(xié)議的，運(yùn)維老師加上https的就可以。

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

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

相關(guān)文章

  • 跨域問(wèn)題匯總

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

    MkkHou 評(píng)論0 收藏0

  • HTML5 安全問(wèn)題解析

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

    maybe_009 評(píng)論0 收藏0

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

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

    ytwman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<