先疊個(gè)甲,有錯(cuò)誤,望溝通指正!

1.什么是跨域報(bào)錯(cuò)

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

類似上面的報(bào)錯(cuò) ,就是出現(xiàn)了跨域限制訪問問題

2.為什么postman可以,瀏覽器訪問就不行?根本原因是什么?

同源策略（Same-Origin Policy）,這個(gè)是瀏覽器的一個(gè)策略.也就是在A的域 去請(qǐng)求B域的資源,是不被瀏覽器允許的
這一種存在于瀏覽器上的安全策略,所以你用edge還是chrome,都會(huì)出現(xiàn)這個(gè)問題.而使用postman則沒有.
拋出這個(gè)報(bào)錯(cuò)的根源在于瀏覽器

2.1瀏覽器是依據(jù)什么來報(bào)錯(cuò)跨域的?

并不是只通過IP來判斷是否跨域報(bào)錯(cuò)的.
這里還涉及到一個(gè)參數(shù)就是Access-Control-Allow-Origin.如果請(qǐng)求B域的時(shí)候,返回的header帶有這個(gè)參數(shù).那么也是被瀏覽器允許的(可以通過同源策略的安全限制)

B域的服務(wù),返回頭中是否帶有Access-Control-Allow-Origin,取決于B域的后臺(tái)服務(wù)的代碼中,是否開啟了相關(guān)功能.
具體JAVA GOLANG PYTHON C#,如何開啟Access-Control-Allow-Origin ,可以全網(wǎng)搜一下 ,不贅述了

也就是B域的服務(wù)端,開啟了Access-Control-Allow-Origin,那么所有瀏覽器都可以跨域訪問呢這個(gè)資源

3.常規(guī)解決方案的分析

方案1.通過代理解決

也就是最常見到的,在使用vue-admin-templete等前端分離項(xiàng)目開發(fā)時(shí),咱們?cè)趘ue.config.js里面配置的proxy
類似這樣

devServer: {
    port: port,   //服務(wù)器 是A域
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    proxy: {
      '/dev-api/vat':{
        target:"http://B域:8080",
        changeOrigin: true,
      }
    }
  },

結(jié)論: 核心原理也就是轉(zhuǎn)發(fā). ,對(duì)于瀏覽器來說,訪問/dev-api/vat的時(shí)候,實(shí)際上確實(shí)是訪問服務(wù)器的/dev-api/vat資源.
但是服務(wù)器在后臺(tái)啟動(dòng)了一個(gè)代理,將/dev-api/vat資源轉(zhuǎn)發(fā)給了B域.
因?yàn)槭谴矸?wù)發(fā)起給B域的,所以沒有同源策略的限制.代理服務(wù)自然能夠成功收到B域的返回.
接下來代理服務(wù)將結(jié)果返回給瀏覽器(這里對(duì)于瀏覽器來說,代理服務(wù)和A域 是同源的 所以沒有報(bào)錯(cuò))

方案2.被請(qǐng)求的B域的服務(wù)端開啟Access-Control-Allow-Origin返回頭的支持

具體JAVA GOLANG PYTHON C#,如何開啟Access-Control-Allow-Origin ,可以全網(wǎng)搜一下 ,不贅述了
也就是B域的服務(wù)端,開啟了Access-Control-Allow-Origin,那么多有瀏覽器都可以跨域訪問呢這個(gè)資源

方案3.通過設(shè)置瀏覽器關(guān)閉同源策略來實(shí)現(xiàn)訪問互通

以chrome為例 ,在快捷方式–屬性–目標(biāo)這里,追加參數(shù) --disable-web-security --user-data-dir=用戶數(shù)據(jù)目錄 即可

例如
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\temp

此時(shí) 打開chrome將不再受跨域的束縛,但是會(huì)提示你安全性降低文章來源地址http://www.zghlxwxcb.cn/news/detail-841282.html

4.對(duì)比3種方案

到了這里，關(guān)于Chrome 跨域問題CORS 分析的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！