Comprendere a fondo il front-end cross-domain

La politica della stessa origine è una politica che i browser seguono per garantire la sicurezza delle risorse. Questa politica impone alcune restrizioni sull'accesso alle risorse.
Descrizione della politica della stessa origine del W3C:Politica della stessa origine。

1.2 Cos'è l'origine?

1 componenti di origine

2Nella tabella seguente solo le due sorgenti dell'ultima riga hanno la stessa origine.

Fonte 1	Fonte 2	È omologa?
http://www.xyz.com/home	https://www.xyz.com/home	⛔Non omogeneo️
http://www.xyz.com/home	http://mail.xyz.com/home	⛔Non omogeneo
http://www.xyz.com:8080/home	http://www.xyz.com:8090/home	⛔Non omogeneo
http://www.xyz.com:8080/home	http://www.xyz.com:8080/search	✅Stessa origine︎

3 richiesta di origine

4 Richiesta non originaria

5 Riepilogo: se la "sorgente" non è coerente con la "sorgente di destinazione", significa "non-sorgente", nota anche come "eterosorgente" o "interdominio"

2. Quali sono le restrizioni sulle transazioni tra domini?

Ad esempio, se ci sono due fonti: "Fonte A" e "Fonte B", che sono "origine diversa", il browser avrà le seguenti restrizioni:

2.1 Limitare l'accesso al DOM

Lo script della "Sorgente A" non può accedere al DOM della "Sorgente B".


<!-- <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 Limitare l'accesso ai cookie

La "Fonte A" non può accedere al cookie della "Fonte B"


<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 Limitare Ajax per ottenere dati

La "Fonte A" può inviare richieste alla "Fonte B", ma non può ottenere i dati di risposta dalla "Fonte 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)

Nota: tra le restrizioni di cui sopra, quella del browser sull'acquisizione dei dati Ajax ha l'impatto maggiore e viene spesso riscontrata nello sviluppo effettivo.

3 punti da notare

1Le restrizioni tra domini esistono solo sul lato browser e non esistono restrizioni tra domini sul lato server.
2 Anche se si tratta di domini incrociati, le richieste Ajax possono essere emesse normalmente, ma i dati di risposta non verranno consegnati allo sviluppatore.
3<link> , <script>、<img>...... 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响

4CORS risolve i problemi tra domini Ajax

4.1Panoramica CORS

Il nome completo di CORS: Cross-Origin Resource Sharing (Condivisione di risorse incrociate) è un insieme di specifiche utilizzate per controllare la verifica del browser delle richieste tra domini. Il server segue la specifica CORS e aggiunge intestazioni di risposta specifiche per controllare la verifica del browser. Le regole generali sono le seguenti:
●Il server rifiuta esplicitamente le richieste tra domini o non lo indica e il browser non supera la verifica.
●Il server indica chiaramente che le richieste tra domini sono consentite e la verifica del browser viene superata.
Nota: l'utilizzo di CORS per risolvere problemi tra domini è il modo più ortodosso e richiede che il server sia "uno dei nostri".

4.2CORS risolve semplici richieste interdominio

L'idea generale: quando il server risponde, esprime chiaramente che una determinata fonte è autorizzata ad avviare richieste tra domini aggiungendo l'intestazione di risposta Access-Control-Allow-Origin, quindi il browser la passa direttamente durante la verifica.

Codice core lato server (prendi Express Framework come esempio):


// 处理跨域中间件
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 Richieste semplici e richieste complesse

Il CORS dividerà le richieste in due categorie: ① richieste semplici e ② richieste complesse.

semplice richiesta	Richiesta complessa
✅Il metodo di richiesta (metodo) è: GET, HEAD, POST	1 è una richiesta semplice o una richiesta complessa. 2 Le richieste complesse invieranno automaticamente le richieste di preflight.
✅I campi dell'intestazione della richiesta devono essere conformi"Specifiche di sicurezza CORS" Breve nota: finché l'intestazione della richiesta non viene modificata manualmente, generalmente può essere conforme a questa specifica.
✅Il valore Content-Type dell'intestazione della richiesta può essere solo i seguenti tre: ●testo/semplice ●multipart/form-data ●applicazione/x-www-form-urlencoded

Per quanto riguarda le richieste di preflight:

1Tempi di invio: la richiesta preliminare viene inviata prima dell'effettiva richiesta interdominio e viene avviata automaticamente dal browser.
2 Funzione principale: utilizzata per confermare al server se consentire la successiva richiesta interdominio.
3Processo di base: avviare innanzitutto una richiesta OPTIONS. Se supera il controllo preliminare, continuare ad avviare l'effettiva richiesta interdominio.
4 Contenuto dell'intestazione della richiesta: una richiesta di preflight OPTIONS solitamente contiene le seguenti intestazioni della richiesta:

Intestazione della richiesta	Senso
Origine	La fonte della richiesta
Metodo di richiesta di controllo degli accessi	Il metodo HTTP effettivamente richiesto
Intestazioni di richiesta di controllo di accesso	Intestazioni personalizzate utilizzate nella richiesta effettiva (se presenti)

4.4CORS risolve richieste complesse tra domini

1 Passo uno: il server passa prima la richiesta di preflight del browser Il server deve restituire la seguente intestazione di risposta:

intestazione della risposta	Senso
Controllo-accesso-consenti-origine	fonti consentite
Metodi di controllo degli accessi consentiti	metodi consentiti
Controllo-accesso-consenti-intestazioni	Intestazioni personalizzate consentite
Controllo-Accesso-Età-Massima	Tempo di memorizzazione nella cache dei risultati per le richieste di verifica preliminare (facoltativo)

2 Passaggio 2: gestire la richiesta interdominio effettiva (nello stesso modo in cui gestisci le richieste interdominio semplici)

Codice principale del server:


// 处理预检请求
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 Utilizzare la libreria cors per completare rapidamente la configurazione

Nella configurazione precedente, è necessario configurare personalmente l'intestazione della risposta oppure incapsulare manualmente il middleware. Con la libreria cors è possibile completare la configurazione in modo più pratico.

●Installa cors

npm i cors

●Configurazione semplice cor

app.use(cors())

●Configurare completamente cors


// 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中间件

Per impostazione predefinita, js non può accedere all'intestazione della risposta impostata dal backend e deve essere esposto dal backend.

5JSONP risolve i problemi tra domini

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

2Processo di base:

○Passaggio uno: il cliente crea un file<script>标签，并将其src属性设置为包含跨域请求的 URL，同时准备一个回调函数，这个回调函数用于处理返回的数据。
○Passaggio 2: dopo aver ricevuto la richiesta, il server incapsula i dati nella funzione di callback e li restituisce.
○Passaggio 3: viene richiamata la funzione di callback del client e i dati vengono passati alla funzione di callback sotto forma di parametri.

3Illustrazione:

4 esempi di codice:


<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>

5jQuery incapsulato jsonp

?callback=?' è un formato fisso e verrà analizzato automaticamente


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

6Configurare il proxy per risolvere problemi tra domini

6.1 Configura tu stesso il server proxy

Non ci sono problemi tra domini tra i server. È necessario utilizzare Express per avviare le risorse statiche per garantire che il server e la pagina siano nella stessa origine.


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

Configura il proxy con http-proxy-middleware


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

vantaggio:

Funzioni avanzate: http-proxy-middleware fornisce numerose opzioni di configurazione per soddisfare le varie esigenze del proxy.
È possibile configurare più proxy in modo flessibile: è possibile configurare più server proxy, corrispondenti a diversi percorsi di interfaccia.
Può intercettare le richieste: le richieste possono essere intercettate e modificate tramite funzioni di elaborazione personalizzate.

discordanza:

La configurazione è relativamente complessa: è necessario comprendere le regole di configurazione e i parametri della libreria http-proxy-middleware.
Non adatto per ambienti di produzione: http-proxy-middleware viene utilizzato principalmente in ambienti di sviluppo e non è adatto per ambienti di produzione.

scene da utilizzare:

Adatto a progetti front-end che utilizzano qualsiasi strumento di creazione e funziona con qualsiasi server di sviluppo.
Adatto a scenari in cui è necessario configurare più server proxy in modo flessibile.
Adatto a scenari in cui le richieste devono essere intercettate e modificate.

6.2 Utilizzare Nginx per creare un server proxy

L'idea generale: lasciare che nginx svolga due ruoli, sia come server di contenuti statici che come server proxy.

Modifica la configurazione di nginx come segue. Tieni presente che la directory root di nginx preferibilmente non è l'unità C.


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

2 Modificare il progetto front-end in modo che tutte le richieste vengano inoltrate a /dev e quindi riconfezionate


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

Quindi accedi direttamente al server nginx. Ad esempio, se nginx è in esecuzione sulla porta 8099, access

http://localhost:8099

Quindi incontrerai il problema di aggiornamento 404, aggiungi la configurazione nginx per risolverlo


 
# 配置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/;
}

L'aggiunta di questi due "/" elimina dev

6.3 Costruisci un server con l'aiuto di impalcature

1. Utilizzare il file vue.config.js per configurare il proxy:

Crea un file vue.config.js nella directory root del progetto Vue e aggiungi il seguente codice:


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

Nel codice precedente usiamodevServer Elementi di configurazione per configurare il server proxy.InproxyLe proprietà vengono utilizzate per configurare le regole del proxy,/apiIndica il percorso dell'interfaccia che richiede l'inoltro.targetL'attributo rappresenta l'indirizzo del server di destinazione del proxy,changeOriginL'attributo indica se modificare l'indirizzo di origine della richiesta.pathRewriteProprietà utilizzata per sovrascrivere il percorso richiesto.