[Errore CORS] Problema relativo alla richiesta tra domini: soluzioni CORS in vari ambienti

2024-07-12

Inserisci qui la descrizione dell'immagine

🔥 个人主页：poesia vuota

Inserisci qui la descrizione dell'immagine

Elenco degli articoli

Inserisci qui la descrizione dell'immagine

Condivisione delle risorse tra domini (CORS, Cross-Origin Resource Sharing) rappresentano una sfida comune nello sviluppo front-end. Questo articolo introdurrà in dettaglio le soluzioni in diversi ambienti (come progetti Vue3 + Vite, progetti jQuery e altri ambienti).

1. Cause comuni degli errori CORS

L'essenza del problema tra domini è che il browser limita il caricamento delle risorse da una fonte (dominio, protocollo, porta) a un'altra fonte per motivi di sicurezza. Questo meccanismo di sicurezza è chiamato "politica della stessa origine". La politica della stessa origine stabilisce che il browser consentirà il passaggio della richiesta solo se l'URL richiesto ha lo stesso protocollo, nome di dominio e porta dell'URL della pagina Web corrente.

Mancanza di intestazioni CORS：
Il server non ha impostato le intestazioni di risposta CORS corrette, causando il rifiuto della richiesta da parte del browser.Ad esempio, il browser si aspetta che la risposta del server contengaAccess-Control-Allow-Origin header, se questa intestazione non è impostata, il browser bloccherà la richiesta.
Le richieste multiorigine sono vietate：
Per impostazione predefinita, i browser bloccano le richieste multiorigine per proteggere gli utenti. Se il server non consente l'accesso per un dominio specifico, il browser genererà un errore CORS.
Richiesta di verifica preliminare non riuscita：
Per alcune richieste complesse, il browser invierà una richiesta di preflight (richiesta OPTIONS) per confermare se il server consente la richiesta. Se la richiesta di preflight fallisce, si verificherà un errore CORS.

2. Soluzione

1. Vista3 + Soluzioni nell'ambito del progetto Vite

Attraverso la funzione proxy del server di sviluppo di Vite, le richieste locali possono essere inoltrate a server diversi per evitare problemi tra domini. Ecco i passaggi specifici:

Crea progetto Vue3 + Vite

npm create vite@latest
cd your-project-name
npm install
1
2
3

Seleziona il modello Vue3 e accedi alla directory del progetto.

Configura il proxy di Vite

Trovato nella directory principale del progetto Vitevite.config.ts(Ovite.config.js) ed effettuare la seguente configurazione:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 目标服务器
        changeOrigin: true, // 是否改变请求源
        rewrite: (path) => path.replace(/^/api/, ''), // 重写路径
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

invia richiesta

Nel componente Vue, puoi passareaxiosOfetch invia richiesta. Per esempio:

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        data.value = response.data;
      } catch (error) {
        console.error('请求错误:', error);
      }
    };

    return {
      data,
      fetchData,
    };
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2. Soluzioni nell'ambito del progetto jQuery

Nei progetti jQuery, i problemi CORS possono essere risolti impostando le intestazioni delle richieste o utilizzando JSONP.

Utilizza le intestazioni della richiesta CORS

Assicurati che sul server siano impostate le intestazioni CORS corrette, ad esempio Access-Control-Allow-Origin . Quando il client avvia una richiesta:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $.ajax({
    url: 'http://api.example.com/data',
    method: 'GET',
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error('请求错误:', error);
    }
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

Utilizzando JSONP

Se il server supporta JSONP, i problemi tra domini possono essere risolti nei seguenti modi:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $.ajax({
    url: 'http://api.example.com/data',
    method: 'GET',
    dataType: 'jsonp', // 使用JSONP
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error('请求错误:', error);
    }
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. Soluzioni in altri ambienti

Utilizza proxy lato server

In molti casi, è possibile impostare un proxy sul lato server per inoltrare richieste tra domini tramite il lato server.Ad esempio, in Node.js puoi utilizzarehttp-proxy-middleware：

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/api', createProxyMiddleware({
  target: 'http://api.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '',
  },
}));
1
2
3
4
5
6
7
8
9

Imposta le intestazioni CORS

Assicurati che nella risposta del server siano incluse le intestazioni CORS corrette. Ad esempio, in Node.js + Express:

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Configura il proxy utilizzando Nginx

In Nginx, i problemi CORS possono essere risolti configurando il proxy:

server {
    listen 80;
    server_name yourdomain.com;

    location /api/ {
        proxy_pass http://api.example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

3. Riepilogo

Il problema CORS èSviluppo front-end Una sfida comune, ma che può essere risolta in modo efficace con la corretta configurazione del proxy e le impostazioni del server. In ambienti diversi, puoi utilizzare la funzione proxy di Vite, impostare intestazioni di richiesta, JSONP, proxy lato server, proxy Nginx e altri metodi per risolvere problemi tra domini. Spero che questo articolo ti aiuti a comprendere e risolvere i problemi CORS.

Condivisione della tecnologia