Technology sharing

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

🔥 个人主页：blank carmen

Crucem-domain resource sharing (CORS, Cross-Originum Resource Socius) quaestiones communes provocationes sunt ante finem progressionem. Hic articulus solutiones singillatim in variis ambitibus (ut Vue3 + Vite incepta, jQuery incepta, et in aliis ambitibus).

---

1. Causae communes de CORS errorum

Essentia quaestionis crucis-domicilii est quod navigatrum oneratum facultates ab uno fonte (domain, protocollo, portu) ad alium fontem ad rationes securitatis restringit. Haec mechanismus securitatis "eandem originem consiliorum" appellavit. Ex eadem origine consilium rogat ut navigatrum permitteret ut petitionem transire permitteret si domicilium petitum idem protocollum, nomen domain et portum habet, sicut domicilium paginae hodiernae.

1. Nullam CORS capitis：
   Servo caput capitis responsionem rectam non posuit, navigatrum causa petitionis reiicere.Exempli gratia, navigatrum exspectat responsum servo contineriAccess-Control-Allow-Origin caput, si hoc caput non positum est, navigatrum petitionem obstruet.

2. Crucem-originis petitiones prohibentur：
   Defalta navigatores exitus crucis originis petitiones tuendi users. Si servo accessum ad certam domain non permittit, navigatrum cors errorem mittet.

3. Preflight petitionem defuit：
   Nonnullis postulationibus implicatis, navigatrum petitionem praemissam mittet (OPTIONS request) ut confirmet num minister petitionem permittat. Si praevaricatio postulatio defecerit, CORS error proveniet.

---

2. Solutio

1. Vue3 + Solutiones sub vite project

Per promotionem vite procuratoris munus ministrantis, petitiones locales diversis servientibus applicari possunt ad problemata crucis domain vitanda. Hic sunt gradus specifici;

Crea Vue3 + Vite project

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

Lego Vue3 template et intrant exertus presul.

Configurare procuratorem vite

Inventus in radix directorio Vite projectvite.config.ts(or*vite.config.js) et conformationem sequentem fac:

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

mittam petitionem

In Vue component, transire potesaxiosor *fetch mittam petitionem. Exempli gratia:

<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. Solutiones sub jQuery project

In jQuery inceptis, CORS quaestiones solvi possunt petentibus capitis petentibus vel JSONP utendo.

Usus CORS petere capitis

Fac servo habere rectam CORS capitis capita, ut Access-Control-Allow-Origin . Cum huius petitionis initiat:

<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

utens JSONP

Si servo JSONP sustinet, exitus dominii exitus his modis solvi possunt:

<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. Solutiones in aliis ambitibus

Utere servo, latus proxies

In multis casibus procurator erigi potest in parte ministri ad petitiones crucis-dominium per latus servientis transmittere.Exempli gratia in Node.js uti poteshttp-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

Set CORS capitis

Fac rectam CORS capitis capitis in responsione servo contineri. Exempli gratia 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

Configurare procuratorem per Nginx

In Nginx, CORS quaestiones solvi possunt per procuratorem conformando;

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

Quaestio est CORSAnte finem progressionem Communis provocatio, sed efficaciter solvi potest cum propriae institutionis configuratione et servo occasus. In diversis ambitibus, munus procuratoris Vite uti potes, petentibus caput, JSONP, procuratorem lateris ministrantis, procuratorem Nginx et alias methodos ad solvendas quaestiones dominicas solvendas. Articulum hunc spero adiuvabit ad intellegendum et solvendum CORS difficultates.