成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

跨域相關(guān)問題

Lycheeee / 954人閱讀

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

最近遇到了一個(gè)項(xiàng)目，第一次和其他組的后端合作，由于域名也是新申請(qǐng)的，所以在合作過(guò)程中遇到了很多跨域的問題?，F(xiàn)在自己做一下模擬總結(jié)。這里我的前端使用的vue，后端使用的express。沒有使用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()
        }
    }
})
問題一：域名不一致的跨域提示 現(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域名，但是沒有帶上端口號(hào)，帶上端口號(hào)即可。

問題二： 后端沒有設(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

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

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

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://systransis.cn/yun/109597.html

相關(guān)文章

  • 跨域問題匯總

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

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

  • HTML5 安全問題解析

    摘要：本地安全問題在之前引入了本地這個(gè)東西，但是后面被廢除了，他的安全點(diǎn)和后臺(tái)數(shù)據(jù)庫(kù)的關(guān)注點(diǎn)差不多，就是要防止在數(shù)據(jù)中混入查詢指令。僵尸網(wǎng)絡(luò)風(fēng)險(xiǎn)中解決了單線程問題，提出了機(jī)制，它為提供多線程支持，但是多線程帶來(lái)了一個(gè)非?？膳碌奈ｋU(xiǎn)僵尸網(wǎng)絡(luò)。 HTML5 安全問題解析 標(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)求分成兩類簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。 前言 從剛接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過(guò)N個(gè)跨域相關(guān)的問題了，16年時(shí)也整理過(guò)一篇相關(guān)文章，但是感覺還是差了點(diǎn)什么，于是現(xiàn)在重新梳理了一下。 個(gè)人見識(shí)有限，如有差錯(cuò)，請(qǐng)多多見諒，歡迎提出iss...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<