Ymmärrä perusteellisesti käyttöliittymän cross-domain

Saman alkuperän käytäntö on käytäntö, jota selaimet noudattavat varmistaakseen resurssien turvallisuuden. Tämä käytäntö rajoittaa resurssien käyttöä.
Kuvaus W3C:n saman alkuperän käytännöstä:Sama alkuperäpolitiikka。

1.2 Mikä on alkuperä?

1 lähdekomponentteja

2Alla olevassa taulukossa vain kahdella viimeisen rivin lähteellä on sama alkuperä.

Lähde 1	Lähde 2	Onko se homologinen?
http://www.xyz.com/home	https://www.xyz.com/home	⛔Epähomogeeninen️
http://www.xyz.com/home	http://mail.xyz.com/home	⛔Epähomogeeninen
http://www.xyz.com:8080/home	http://www.xyz.com:8090/home	⛔Epähomogeeninen
http://www.xyz.com:8080/home	http://www.xyz.com:8080/search	✅Sama alkuperä︎

3 alkuperäpyyntö

4 Ei-alkuperäinen pyyntö

5 Yhteenveto: Jos "lähde" on ristiriidassa "kohdelähteen" kanssa, se tarkoittaa "ei-lähdettä", joka tunnetaan myös nimellä "heterolähde" tai "verkkotunnusten välinen"

2. Mitkä ovat verkkotunnusten välisten tapahtumien rajoitukset?

Jos lähdettä on esimerkiksi kaksi: "lähde A" ja "lähde B", jotka ovat "ei-sama alkuperä", selaimella on seuraavat rajoitukset:

2.1 Rajoita DOM-käyttöä

Lähteen A komentosarja ei voi käyttää lähteen B DOM:ia.


<!-- <iframe id="framePage" src="./demo.html"></iframe> -->
<iframe id="framePage" src="https://www.baidu.com"></iframe>
 
<script type="text/javascript" >
  function showDOM(){
    const framePage = document.getElementById('framePage')
    console.log(framePage.contentWindow.document) //同源的可以获取，非同源的无法获取
  }
</script>

2.2 Rajoita evästeiden käyttöä

"Lähde A" ei voi käyttää "Lähteen B" evästettä


<iframe id="baidu" src="http://www.baidu.com" width="500" height="300"></iframe>
 
<script type="text/javascript" >
  // 访问的是当前源的cookie，并不是baidu的cookie
  console.log(document.cookie)
</script>

2.3 Rajoita Ajaxia tietojen hankkimiseen

"Lähde A" voi lähettää pyyntöjä "Lähteelle B", mutta ei voi saada vastaustietoja "Lähteestä B".


const url = 'https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc'
let result = await fetch(url)
let data = await result.json();
console.log(data)

Huomautus: Yllä mainituista rajoituksista suurin vaikutus on selaimen rajoituksella Ajax-tiedonkeruulle, ja se kohdataan usein varsinaisessa kehitystyössä.

Huomioitavaa 3 pistettä

1Verkkotunnusten väliset rajoitukset ovat olemassa vain selainpuolella, eikä verkkotunnusten välisiä rajoituksia ole palvelinpuolella.
2 Vaikka se olisi verkkotunnusten välinen, Ajax-pyynnöt voidaan lähettää normaalisti, mutta vastaustietoja ei luovuteta kehittäjälle.
3<link> , <script>、<img>...... 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响

4CORS ratkaisee Ajax-verkkotunnusten väliset ongelmat

4.1CORS Yleiskatsaus

CORS:n koko nimi: Cross-Origin Resource Sharing (Cross-Origin Resource Sharing) on joukko määrityksiä, joita käytetään verkkotunnusten välisten pyyntöjen selaimen varmentamiseen. Palvelin noudattaa CORS-spesifikaatiota ja lisää erityisiä vastausotsikoita selaimen vahvistuksen hallintaan. Yleiset säännöt ovat seuraavat:
●Palvelin nimenomaisesti hylkää verkkotunnusten väliset pyynnöt tai ei ilmoita siitä, ja selain epäonnistuu vahvistuksessa.
●Palvelin ilmoittaa selvästi, että verkkotunnusten väliset pyynnöt ovat sallittuja, ja selaimen vahvistus menee läpi.
Huomautus: CORS:n käyttäminen verkkotunnusten välisten ongelmien ratkaisemiseen on ortodoksisin tapa, ja se edellyttää, että palvelin on "omamme".

4.2CORS ratkaisee yksinkertaiset verkkotunnusten väliset pyynnöt

Yleisidea: Kun palvelin vastaa, se ilmaisee selvästi, että tietty lähde saa aloittaa verkkotunnusten välisiä pyyntöjä lisäämällä Access-Control-Allow-Origin-vastausotsikon, ja sitten selain välittää sen suoraan varmennuksen aikana.

Palvelinpuolen ydinkoodi (ota esimerkkinä pikakehys):


// 处理跨域中间件
function corsMiddleWare(req,res,next){
  // 允许 http://127.0.0.1:5500 这个源发起跨域请求
  // res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
  
  // 允许所有源发起跨域请求
  res.setHeader('Access-Control-Allow-Origin','*')
  next()
}
 
// 配置路由并使用中间件
app.get('/',corsMiddleWare,(req,res)=>{
  res.send('hello!')
})

4.3 Yksinkertaiset pyynnöt ja monimutkaiset pyynnöt

CORS jakaa pyynnöt kahteen luokkaan: ① yksinkertaisiin pyyntöihin ja ② monimutkaisiin pyyntöihin.

yksinkertainen pyyntö	Monimutkainen pyyntö
✅Pyyntötapa (menetelmä) on: GET, HEAD, POST	1 on joko yksinkertainen tai monimutkainen pyyntö. 2 Monimutkaiset pyynnöt lähettävät automaattisesti esitarkastuspyynnöt.
✅Pyynnön otsikkokenttien on noudatettava"CORS-suojausmääritys" Lyhyt huomautus: Niin kauan kuin pyynnön otsikkoa ei muokata manuaalisesti, se voi yleensä noudattaa tätä määritystä.
✅Pyynnön otsikon Content-Type-arvo voi olla vain seuraavat kolme: ●teksti/tavallinen ●multipart/form-data ●application/x-www-form-urlencoded

Mitä tulee esilentopyyntöihin:

1Lähetyksen ajoitus: Esitarkastuspyyntö lähetetään ennen varsinaista verkkotunnusten välistä pyyntöä, ja selain käynnistää sen automaattisesti.
2 Päätoiminto: käytetään vahvistamaan palvelimelta, sallitaanko seuraava verkkotunnusten välinen pyyntö.
3Perusprosessi: Aloita ensin OPTIONS-pyyntö, jos se läpäisee esitarkastuksen, jatka varsinaisen verkkotunnusten välisen pyynnön aloittamista.
4 Pyynnön otsikon sisältö: OPTIONS-esitarkastuspyyntö sisältää yleensä seuraavat pyyntöotsikot:

Pyynnön otsikko	merkitys
Alkuperä	Pyynnön lähde
Access-Control-Request-Method	Todellinen pyydetty HTTP-menetelmä
Access-Control-Request-Headers	Varsinaisessa pyynnössä käytetyt mukautetut otsikot (jos sellaisia on)

4.4CORS ratkaisee monimutkaiset verkkotunnusten väliset pyynnöt

1 Vaihe yksi: Palvelin välittää ensin selaimen esitarkastuspyynnön. Palvelimen on palautettava seuraava vastausotsikko:

vastauksen otsikko	merkitys
Access-Control-Allow-Origin	sallittuja lähteitä
Access-Control-Allow-Methods	sallitut menetelmät
Access-Control-Allow-Headers	Sallitut mukautetut otsikot
Access-Control-Max-Age	Esitarkastuspyyntöjen tulosten välimuistin aika (valinnainen)

2 Vaihe 2: Käsittele todellinen verkkotunnusten välinen pyyntö (samalla tavalla kuin käsittelet yksinkertaisia verkkotunnusten välisiä pyyntöjä)

Palvelimen ydinkoodi:


// 处理预检请求
app.options('/students', (req, res) => {
  // 设置允许的跨域请求源
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  // 设置允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET')
  // 设置允许的请求头
  res.setHeader('Access-Control-Allow-Headers', 'school')
  // 设置预检请求的缓存时间（可选）
  res.setHeader('Access-Control-Max-Age', 7200)
  // 发送响应
  res.send()
})
 
// 处理实际请求
app.get('/students', (req, res) => {
  // 设置允许的跨域请求源
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  // 随便设置一个自定义响应头
  res.setHeader('abc',123)
  // 设置允许暴露给客户端的响应头
  res.setHeader('Access-Control-Expose-Headers', 'abc')
  // 打印请求日志
  console.log('有人请求/students了')
  // 发送响应数据
  res.send(students)
})

4.5 Käytä cors-kirjastoa konfiguroinnin nopeaan viimeistelemiseen

Yllä olevassa kokoonpanossa sinun on määritettävä vastauksen otsikko itse tai sinun on kapseloitava väliohjelmisto manuaalisesti Cors-kirjaston avulla voit suorittaa konfiguroinnin helpommin.

●Asenna johdot

npm i cors

●Yksinkertaiset konfiguraatiot

app.use(cors())

●Määritä cors kokonaan


// cors中间件配置
const corsOptions = {
  origin: 'http://127.0.0.1:5500', // 允许的源
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'], // 允许的方法
  allowedHeaders: ['school'], // 允许的自定义头
  exposedHeaders: ['abc'], // 要暴露的响应头
  optionsSuccessStatus: 200 // 预检请求成功的状态码
};
 
app.use(cors(corsOptions)); // 使用cors中间件

Oletusarvoisesti js ei voi käyttää taustajärjestelmän määrittämää vastausotsikkoa, ja taustajärjestelmän on esitettävä se.

5JSONP ratkaisee verkkotunnusten väliset ongelmat

1JSONP:n yleiskatsaus: JSONP käyttää<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持 CORS 的时，可以靠 JSONP 解决跨域。

2Perusprosessi:

○Vaihe yksi: Asiakas luo a<script>标签，并将其src属性设置为包含跨域请求的 URL，同时准备一个回调函数，这个回调函数用于处理返回的数据。
○Vaihe 2: Vastaanotettuaan pyynnön palvelin kapseloi tiedot takaisinsoittotoimintoon ja palauttaa sen.
○Vaihe 3: Asiakkaan takaisinsoittotoiminto kutsutaan ja tiedot siirretään takaisinsoittotoimintoon parametrien muodossa.

3Kuva:

4 esimerkkiä koodista:


<button onclick="getTeachers()">获取数据</button>
 
<script type="text/javascript" >
  function callback(data){
    console.log(data)
  }
 
  function getTeachers(url){
    // 创建script元素
    const script = document.createElement('script')
    // 指定script的src属性
    script.src= 'http://127.0.0.1:8081/teachers'
    // 将script元素添加到body中触发脚本加载
    document.body.appendChild(script)
    // script标签加载完毕后移除该标签
    script.onload = ()=>{
      script.remove()
    }
  }
</script>

5jQueryn kapseloitu jsonp

?callback=?' on kiinteä muoto ja se jäsennetään automaattisesti


$.getJSON('http://127.0.0.1:8081/teachers?callback=?',(data)=>{
  console.log(data)
})

6 Määritä välityspalvelin verkkotunnusten välisten ongelmien ratkaisemiseksi

6.1 Määritä välityspalvelin itse

Palvelimien välillä ei ole verkkotunnusten välisiä ongelmia. Sinun on käytettävä staattisten resurssien käynnistämistä, jotta palvelimesi ja sivusi ovat saman alkuperän alla.


// 启动静态资源 让服务器跟页面同一个源
app.use(express.static("./public"));

Määritä välityspalvelin http-proxy-middlewarella


const { createProxyMiddleware } = require('http-proxy-middleware');
 
app.use('/api',createProxyMiddleware({
  target:'https://www.toutiao.com',
  changeOrigin:true,
  pathRewrite:{
    '^/api':''
  }

etu:

Monipuoliset toiminnot: http-proxy-middleware tarjoaa runsaasti konfigurointivaihtoehtoja erilaisiin välityspalvelintarpeisiin.
Useita välityspalvelimia voidaan konfiguroida joustavasti: Voidaan konfiguroida useita välityspalvelimia, jotka vastaavat eri liitäntäpolkuja.
Pystyy siepata pyyntöjä: Pyynnöt voidaan siepata ja muokata mukautettujen käsittelytoimintojen avulla.

puute:

Kokoonpano on suhteellisen monimutkainen: sinun on ymmärrettävä http-proxy-middleware-kirjaston konfigurointisäännöt ja parametrit.
Ei sovellu tuotantoympäristöihin: http-proxy-middleware käytetään pääasiassa kehitysympäristöissä, eikä se sovellu tuotantoympäristöihin.

käytettävät kohtaukset:

Sopii etupään projekteihin, joissa käytetään mitä tahansa rakennustyökalua ja toimii minkä tahansa kehityspalvelimen kanssa.
Sopii tilanteisiin, joissa useita välityspalvelimia on määritettävä joustavasti.
Sopii skenaarioihin, joissa pyyntöjä on siepattava ja muutettava.

6.2 Käytä Nginxiä välityspalvelimen rakentamiseen

Yleisidea: anna nginxin toimia kahdessa roolissa, sekä staattisena sisältöpalvelimena että välityspalvelimena.

Muokkaa nginx-kokoonpanoa seuraavasti. Huomaa, että nginxin juurihakemisto ei ole mieluiten C-asema.


# 配置nginx根目录
location / {
  root   D:dist;
  index  index.html index.htm;
}
 
# 配置代理
location /dev/ {
  # 设置代理目标
  proxy_pass http://sph-h5-api.atguigu.cn/;
}

2 Muokkaa käyttöliittymäprojektia niin, että kaikki pyynnöt välitetään /dev-kansioon ja pakataan sitten uudelleen


const request = axios.create({
  baseURL:'/dev',
  timeout:10000
})

Käytä sitten suoraan nginx-palvelinta, jos esimerkiksi nginx on käynnissä portissa 8099, käytä

http://localhost:8099

Sitten kohtaat refresh 404 -ongelman, lisää nginx-kokoonpano sen ratkaisemiseksi


 
# 配置nginx根目录
location / {
  root   D:dist;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html; # 解决刷新404
}
# 配置代理
location /dev/ {
  # 设置代理目标
  proxy_pass http://sph-h5-api.atguigu.cn/;
}

Näiden kahden "/" lisääminen poistaa dev

6.3 Rakenna palvelin telineiden avulla

1. Määritä välityspalvelin vue.config.js-tiedoston avulla:

Luo vue.config.js-tiedosto Vue-projektin juurihakemistoon ja lisää seuraava koodi:


module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Yllä olevassa koodissa käytämmedevServer Asetuskohteet välityspalvelimen määrittämiseksi.sisäänproxyOminaisuuksia käytetään välityspalvelimen sääntöjen määrittämiseen,/apiOsoittaa liitäntäpolun, joka vaatii välityspalvelinta.targetAttribuutti edustaa välityspalvelimen kohdepalvelimen osoitetta,changeOriginAttribuutti osoittaa, muutetaanko pyynnön lähdeosoitetta.pathRewriteOminaisuus, jota käytetään ohittamaan pyydetty polku.