Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

🔥 个人主页：tyhjä runo

Verkkotunnusten välinen resurssien jakaminen (CORS, Cross-Origin Resource Sharing) -ongelmat ovat yleinen haaste etupään kehityksessä. Tämä artikkeli esittelee yksityiskohtaisesti ratkaisuja eri ympäristöissä (kuten Vue3 + Vite -projektit, jQuery-projektit ja muut ympäristöt).

---

1. CORS-virheiden yleiset syyt

Verkkotunnusten välisen ongelman ydin on se, että selain rajoittaa resurssien lataamista yhdestä lähteestä (domain, protokolla, portti) toiseen lähteeseen turvallisuussyistä. Tätä turvamekanismia kutsutaan "samaksi alkuperäpolitiikaksi". Saman alkuperän käytäntö edellyttää, että selain sallii pyynnön välittämisen vain, jos pyydetyllä URL-osoitteella on sama protokolla, toimialueen nimi ja portti kuin nykyisen verkkosivun URL-osoitteella.

1. CORS-otsikoiden puute：
   Palvelin ei asettanut oikeita CORS-vastausotsikoita, minkä vuoksi selain hylkäsi pyynnön.Esimerkiksi selain odottaa palvelimen vastauksen sisältävänAccess-Control-Allow-Origin header, jos tätä otsikkoa ei ole asetettu, selain estää pyynnön.

2. Ristiinperäiset pyynnöt ovat kiellettyjä：
   Oletuksena selaimet estävät useiden lähteiden pyynnöt käyttäjien suojaamiseksi. Jos palvelin ei salli pääsyä tietylle toimialueelle, selain antaa CORS-virheen.

3. Esitarkastuspyyntö epäonnistui：
   Joissakin monimutkaisissa pyynnöissä selain lähettää esitarkastuspyynnön (OPTIONS-pyynnön) vahvistaakseen, hyväksyykö palvelin pyynnön. Jos esitarkastuspyyntö epäonnistuu, tuloksena on CORS-virhe.

---

2. Ratkaisu

1. Vue3 + Ratkaisut Vite-projektissa

Viten kehityspalvelimen välityspalvelimen avulla paikalliset pyynnöt voidaan välittää eri palvelimille verkkotunnusten välisten ongelmien välttämiseksi. Tässä on tarkat vaiheet:

Luo Vue3 + Vite -projekti

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

Valitse Vue3-malli ja kirjoita projektihakemisto.

Määritä Viten välityspalvelin

Löytyy Vite-projektin juurihakemistostavite.config.ts(taivite.config.js) ja tee seuraavat asetukset:

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

Lähetä pyyntö

Vue-komponentissa voit läpäistäaxiostaifetch Lähetä pyyntö. Esimerkiksi:

<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. Ratkaisut jQuery-projektissa

jQuery-projekteissa CORS-ongelmat voidaan ratkaista asettamalla pyyntöotsikot tai käyttämällä JSONP:tä.

Käytä CORS-pyyntöotsikoita

Varmista, että palvelimella on oikeat CORS-otsikot, kuten Access-Control-Allow-Origin . Kun asiakas tekee pyynnön:

<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

JSONP:n käyttö

Jos palvelin tukee JSONP:tä, verkkotunnusten väliset ongelmat voidaan ratkaista seuraavilla tavoilla:

<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. Ratkaisut muissa ympäristöissä

Käytä palvelinpuolen välityspalvelimia

Monissa tapauksissa palvelinpuolelle voidaan asettaa välityspalvelin toimialueiden välisten pyyntöjen välittämiseksi palvelinpuolen kautta.Esimerkiksi Node.js:ssä voit käyttäähttp-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

Aseta CORS-otsikot

Varmista, että palvelimen vastauksessa on oikeat CORS-otsikot. Esimerkiksi 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

Määritä välityspalvelin Nginxillä

Nginxissä CORS-ongelmat voidaan ratkaista määrittämällä välityspalvelin:

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

CORS-ongelma onEtupään kehitys Yleinen haaste, mutta se voidaan ratkaista tehokkaasti asianmukaisilla välityspalvelimen asetuksilla ja palvelinasetuksilla. Eri ympäristöissä voit käyttää Viten välityspalvelintoimintoa, asettaa pyyntöotsikot, JSONP:tä, palvelinpuolen välityspalvelinta, Nginx-välityspalvelinta ja muita menetelmiä verkkotunnusten välisten ongelmien ratkaisemiseen. Toivon, että tämä artikkeli auttaa sinua ymmärtämään ja ratkaisemaan CORS-ongelmia.