प्रौद्योगिकी साझेदारी

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

🔥 个人主页：रिक्त काव्य

पार-डोमेन संसाधनसाझेदारी (CORS, Cross-Origin Resource Sharing) इति विषयाः अग्रे-अन्त-विकासे एकः सामान्यः आव्हानः अस्ति । अयं लेखः विभिन्नेषु वातावरणेषु (यथा Vue3 + Vite परियोजनासु, jQuery परियोजनासु, अन्येषु वातावरणेषु च) समाधानस्य विस्तरेण परिचयं करिष्यति ।

---

1. CORS दोषाणां सामान्यकारणानि

क्रॉस्-डोमेन् समस्यायाः सारः अस्ति यत् ब्राउजर् सुरक्षाकारणात् एकस्मात् स्रोतः (डोमेन, प्रोटोकॉल, पोर्ट्) अन्यस्मिन् स्रोते संसाधनानाम् लोडिंग् प्रतिबन्धयति एतत् सुरक्षातन्त्रं "समानमूलनीतिः" इति उच्यते । समानमूलनीतिः निर्धारयति यत् ब्राउजर् केवलं तदा अनुरोधं पारयितुं अनुमन्यते यदा अनुरोधितस्य URL इत्यस्य वर्तमानजालपृष्ठस्य URL इत्यस्य समानं प्रोटोकॉल, डोमेननाम, पोर्ट् च भवति

1. CORS शीर्षकस्य अभावः：
   सर्वरेण सम्यक् CORS प्रतिक्रियाशीर्षकाणि न सेट् कृताः, येन ब्राउजर् अनुरोधं अङ्गीकृतवान् ।यथा, ब्राउजर् सर्वरप्रतिसादं समाविष्टं कर्तुं अपेक्षतेAccess-Control-Allow-Origin header, यदि एतत् शीर्षकं न सेट् भवति तर्हि ब्राउजर् अनुरोधं अवरुद्धं करिष्यति ।

2. पार-उत्पत्ति-अनुरोधाः निषिद्धाः सन्ति：
   पूर्वनिर्धारितरूपेण ब्राउजर् उपयोक्तृणां रक्षणार्थं पार-उत्पत्ति-अनुरोधं अवरुद्धयन्ति । यदि सर्वरः विशिष्टक्षेत्रस्य प्रवेशं न अनुमन्यते तर्हि ब्राउजर् CORS त्रुटिं क्षिपति ।

3. पूर्व-उड्डयन-अनुरोधः विफलः अभवत्：
   केषाञ्चन जटिल-अनुरोधानाम् कृते, ब्राउजर् पूर्व-उड्डयन-अनुरोधं (OPTIONS अनुरोधं) प्रेषयिष्यति यत् सर्वरः अनुरोधं अनुमन्यते वा इति पुष्टिं करिष्यति । यदि पूर्व-उड्डयन-अनुरोधः विफलः भवति तर्हि CORS-दोषः भविष्यति ।

---

2. समाधानम्

1. Vue3 + Vite परियोजनायाः अन्तर्गतं समाधानम्

Vite इत्यस्य विकाससर्वर-प्रॉक्सी-कार्यस्य माध्यमेन, क्रॉस्-डोमेन-समस्यानां परिहाराय स्थानीय-अनुरोधाः भिन्न-भिन्न-सर्वर्-मध्ये प्रॉक्सी-करणं कर्तुं शक्यन्ते । अत्र विशिष्टानि सोपानानि सन्ति- १.

Vue3 + Vite परियोजना रचयन्तु

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

Vue3 टेम्पलेट् चित्वा परियोजनानिर्देशिकां प्रविशन्तु ।

Vite इत्यस्य प्रॉक्सी विन्यस्यताम्

Vite परियोजनायाः मूलनिर्देशिकायां प्राप्तम्vite.config.ts(वाvite.config.js), तथा निम्नलिखितविन्यासं कुर्वन्तु :

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

अनुरोधं प्रेषयतु

Vue घटके, भवन्तः उत्तीर्णं कर्तुं शक्नुवन्तिaxiosवाfetch अनुरोधं प्रेषयतु। उदाहरणतया:

<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. jQuery परियोजनायाः अन्तर्गतं समाधानम्

jQuery परियोजनासु अनुरोधशीर्षकाणि सेट् कृत्वा अथवा JSONP इत्यस्य उपयोगेन CORS समस्यानां समाधानं कर्तुं शक्यते ।

CORS अनुरोधशीर्षकाणां उपयोगं कुर्वन्तु

सर्वरे सम्यक् CORS हेडर् सेट् अस्ति इति सुनिश्चितं कुर्वन्तु, यथा Access-Control-Allow-Origin . यदा ग्राहकः अनुरोधं आरभते तदा : १.

<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 इत्यस्य उपयोगः

यदि सर्वरः JSONP समर्थयति तर्हि क्रॉस्-डोमेन् समस्याः निम्नलिखितरीत्या समाधानं कर्तुं शक्यन्ते:

<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. अन्येषु वातावरणेषु समाधानम्

सर्वर-पक्षीय-प्रॉक्सी-उपयोगं कुर्वन्तु

बहुषु सन्दर्भेषु सर्वरपक्षेण क्रॉस्-डोमेन् अनुरोधं अग्रे प्रेषयितुं सर्वरपक्षे प्रॉक्सी स्थापयितुं शक्यते ।यथा, Node.js इत्यत्र भवान् उपयोक्तुं शक्नोति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

CORS शीर्षकं सेट् कुर्वन्तु

सर्वर प्रतिक्रियायां समीचीनानि CORS शीर्षकाणि समाविष्टानि इति सुनिश्चितं कुर्वन्तु । यथा, 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

Nginx इत्यस्य उपयोगेन प्रॉक्सी विन्यस्यताम्

Nginx इत्यस्मिन् प्रॉक्सी विन्यस्तं कृत्वा CORS समस्यानां समाधानं कर्तुं शक्यते:

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. सारांशः

CORS समस्या अस्तिअग्रभाग विकास एकं सामान्यं आव्हानं, परन्तु समुचितप्रॉक्सीविन्यासेन सर्वरसेटिंग्स् च प्रभावीरूपेण समाधानं कर्तुं शक्यते । भिन्न-भिन्न-वातावरणेषु, पार-डोमेन-समस्यानां समाधानार्थं भवान् Vite इत्यस्य प्रॉक्सी-कार्यं, अनुरोध-शीर्षकाणि, JSONP, सर्वर-पक्षीय-प्रॉक्सी, Nginx-प्रॉक्सी इत्यादीनि पद्धतयः सेट् कर्तुं शक्नोति । आशासे यत् एषः लेखः भवद्भ्यः CORS समस्यां अवगन्तुं समाधानं च कर्तुं साहाय्यं करिष्यति।