अग्रे-अन्तं cross-domain_developdoc सम्यक् अवगच्छन्तु

समानमूलनीतिः एकः नीतिः अस्ति यस्याः अनुसरणं ब्राउजर्-जनाः संसाधनसुरक्षां सुनिश्चित्य एषा नीतिः संसाधनानाम् अभिगमने केचन प्रतिबन्धाः आरोपयति ।
W3C तः समानमूलनीतेः वर्णनम् : १.समान उत्पत्ति नीति。

१.२ उत्पत्तिः किम् ?

१ स्रोतघटकाः

2अधोलिखिते सारणीयां केवलं अन्तिमपङ्क्तौ द्वयोः स्रोतयोः समानः स्रोतः अस्ति ।

स्रोतः १	स्रोतः २	समरूपं वा ?
http://www.xyz.com/home इति ग्रन्थः इति ग्रन्थः	https://www.xyz.com/गृहे	⛔असजातीय️
http://www.xyz.com/home इति ग्रन्थः इति ग्रन्थः	http://mail.xyz.com/गृहे	⛔असजातीय
http://www.xyz.com:8080/गृहम्	http://www.xyz.com:8090/गृहम्	⛔असजातीय
http://www.xyz.com:8080/गृहम्	http://www.xyz.com:8080/अन्वेषणम्	✅एक एव उत्पत्ति︎

३ उत्पत्तिनिवेदनम्

४ अमूलनिवेदनम्

५ सारांशः - यदि "स्रोतः" "लक्ष्यस्रोतः" सह असङ्गतः अस्ति तर्हि तस्य अर्थः "अस्रोतः" इति, "विषमस्रोत" अथवा "पार-क्षेत्रम्" इति अपि ज्ञायते ।

2. पार-डोमेन-व्यवहारस्य प्रतिबन्धाः के सन्ति ?

यथा, यदि द्वौ स्रोतौ स्तः : "स्रोतः ए" "स्रोतः ख" च, ये "असमानमूलम्" सन्ति, तर्हि ब्राउजर् मध्ये निम्नलिखितप्रतिबन्धाः भविष्यन्ति ।

2.1 DOM अभिगमनं प्रतिबन्धयन्तु

"Source A" इत्यस्य स्क्रिप्ट् "Source B" इत्यस्य DOM प्राप्तुं न शक्नोति ।


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

२.२ कुकी-प्रवेशं प्रतिबन्धयन्तु

"स्रोतः क" "स्रोतः ख" इत्यस्य कुकीं प्राप्तुं न शक्नोति ।


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

२.३ दत्तांशं प्राप्तुं अजाक्सं सीमितं कुर्वन्तु

"स्रोतः A" "स्रोत B" कृते अनुरोधं प्रेषयितुं शक्नोति, परन्तु "स्रोत 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)

नोटः- उपर्युक्तप्रतिबन्धेषु Ajax-दत्तांश-अधिग्रहणे ब्राउजर्-प्रतिबन्धस्य सर्वाधिकं प्रभावः भवति, तथा च प्रायः वास्तविकविकासे सम्मुखीभवति

३ द्रष्टव्याः बिन्दवः

1क्रॉस-डोमेन् प्रतिबन्धाः केवलं ब्राउजर् पक्षे एव विद्यन्ते, सर्वरपक्षे च क्रॉस्-डोमेन् प्रतिबन्धाः नास्ति ।
२ क्रॉस्-डोमेन् अस्ति चेदपि Ajax अनुरोधाः सामान्यतया निर्गन्तुं शक्यन्ते, परन्तु प्रतिक्रियादत्तांशः विकासकाय न समर्पितः भविष्यति ।
३<link> , ९. <script>、<img>...... 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响

4CORS अजाक्स-पार-डोमेन-समस्यानां समाधानं करोति

4.1CORS अवलोकनम्

CORS इत्यस्य पूर्णं नाम: Cross-Origin Resource Sharing (Cross-Origin Resource Sharing) इति विनिर्देशानां समुच्चयः अस्ति यस्य उपयोगः क्रॉस्-डोमेन-अनुरोधानाम् ब्राउज़र-सत्यापनं नियन्त्रयितुं भवति सर्वरः CORS-विनिर्देशस्य अनुसरणं करोति तथा च ब्राउजर्-सत्यापनं नियन्त्रयितुं विशिष्टप्रतिसाद-शीर्षकाणि योजयति सामान्यनियमाः यथा - १.
●सर्वरः स्पष्टतया क्रॉस्-डोमेन् अनुरोधं अङ्गीकुर्वति, अथवा तत् न सूचयति, ब्राउजर् च सत्यापनं विफलं करोति।
●सर्वरः स्पष्टतया सूचयति यत् क्रॉस्-डोमेन् अनुरोधाः अनुमताः सन्ति, तथा च ब्राउजर् सत्यापनम् उत्तीर्णं भवति।
नोटः- क्रॉस्-डोमेन् समस्यानां समाधानार्थं CORS इत्यस्य उपयोगः सर्वाधिकं रूढिवादी मार्गः अस्ति, तथा च सर्वरस्य "स्वामित्वं" आवश्यकम् ।

4.2CORS सरल-पार-डोमेन-अनुरोधानाम् समाधानं करोति

समग्रविचारः : यदा सर्वरः प्रतिक्रियां ददाति तदा स्पष्टतया व्यक्तं करोति यत् कस्यचित् स्रोतस्य Access-Control-Allow-Origin प्रतिक्रियाशीर्षकं योजयित्वा क्रॉस्-डोमेन-अनुरोधानाम् आरम्भस्य अनुमतिः अस्ति, ततः ब्राउजर् सत्यापनस्य समये प्रत्यक्षतया तत् पारयति

सर्वर-पक्षीयकोर-सङ्केतः (express framework इत्येतत् उदाहरणरूपेण गृह्यताम्):


// 处理跨域中间件
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!')
})

४.३ सरलानुरोधाः जटिलानुरोधाः च

CORS अनुरोधं द्वयोः वर्गयोः विभजति : 1 सरलानुरोधाः 2 जटिलानुरोधाः च ।

सरल अनुरोध	जटिल अनुरोध
✅अनुरोधविधिः (विधिः) अस्ति : GET, HEAD, POST	१ सरलः अनुरोधः अथवा जटिलः अनुरोधः अस्ति । २ जटिलानुरोधाः स्वयमेव पूर्वउड्डयनानुरोधं प्रेषयिष्यन्ति।
✅अनुरोधशीर्षकक्षेत्राणि अवश्यमेव अनुपालनीयाः"CORS सुरक्षा विनिर्देशः" । लघुटिप्पणी: यावत् अनुरोधशीर्षकं हस्तचलितरूपेण न परिवर्तितं तावत् सामान्यतया एतस्य विनिर्देशस्य अनुपालनं कर्तुं शक्नोति ।
✅अनुरोधशीर्षकस्य Content-Type मूल्यं केवलं निम्नलिखितत्रयं भवितुम् अर्हति । ●पाठ/सादा ●बहुभाग/रूप-दत्तांश ●अनुप्रयोग/x-www-रूप-urlencoded

उड्डयनपूर्वानुरोधानाम् विषये : १.

1प्रेषणसमयः : पूर्व-उड्डयन-अनुरोधः वास्तविक-क्रॉस्-डोमेन-अनुरोधात् पूर्वं प्रेषितः भवति तथा च ब्राउजर्-द्वारा स्वयमेव आरब्धः भवति ।
२ मुख्यकार्यम् : सर्वरेण सह पुष्ट्यर्थं उपयुज्यते यत् अग्रिम-क्रॉस्-डोमेन-अनुरोधस्य अनुमतिः दातव्या वा इति ।
3मूलभूतप्रक्रिया: प्रथमं OPTIONS अनुरोधं आरभत यदि पूर्वपरीक्षां पारयति तर्हि वास्तविकं क्रॉस्-डोमेन अनुरोधं आरभत।
4 अनुरोधशीर्षकसामग्री: OPTIONS पूर्व-उड्डयन-अनुरोधस्य सामान्यतया निम्नलिखित-अनुरोध-शीर्षकाणि सन्ति:

अनुरोध शीर्षकम्	अर्थ
श्रोतं	निवेदनस्य स्रोतः
अभिगम-नियन्त्रण-अनुरोध-विधि	वास्तविकं अनुरोधितं HTTP पद्धतिः
अभिगमन-नियन्त्रण-अनुरोध-शीर्षक	वास्तविक-अनुरोधे (यदि सन्ति) प्रयुक्ताः इष्ट-शीर्षकाणि

4.4CORS जटिल-पार-डोमेन-अनुरोधानाम् समाधानं करोति

1 प्रथमः चरणः : सर्वरः प्रथमं ब्राउजर् इत्यस्य पूर्व-उड्डयन-अनुरोधं पारयति ।

प्रतिक्रिया शीर्षकम्	अर्थ
अभिगमन-नियन्त्रण-अनुमति-उत्पत्ति	अनुमतस्रोताः
अभिगम-नियन्त्रण-अनुमति-विधयः	अनुमतविधयः
अभिगमन-नियन्त्रण-अनुमति-शीर्षक	अनुमतं कस्टम् शीर्षकम्
अभिगम-नियन्त्रण-अधिकतम-आयुः	पूर्व-उड्डयन-अनुरोधानाम् परिणाम-सञ्चय-समयः (वैकल्पिकः)

२ चरणः २: वास्तविकं क्रॉस्-डोमेन-अनुरोधं नियन्त्रयन्तु (यथा भवन्तः सरल-क्रॉस्-डोमेन-अनुरोधं सम्पादयन्ति)

सर्वर मूलसङ्केतः : १.


// 处理预检请求
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 विन्यासं शीघ्रं पूर्णं कर्तुं cors पुस्तकालयस्य उपयोगं कुर्वन्तु

उपरिष्टाद् विन्यासे, भवद्भिः प्रतिक्रियाशीर्षकं स्वयमेव विन्यस्तं कर्तव्यम्, अथवा भवन्तः middleware इत्येतत् मैन्युअल् रूपेण एन्कैप्सुलेट् कर्तुं प्रवृत्ताः सन्ति, भवन्तः विन्यासं अधिकसुलभतया सम्पूर्णं कर्तुं शक्नुवन्ति ।

●कोर्स स्थापित करें

npm i cors

●सरल विन्यास कोर

app.use(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中间件

पूर्वनिर्धारितरूपेण, js पृष्ठभागेन सेट् कृतं प्रतिक्रियाशीर्षकं प्राप्तुं न शक्नोति तथा च पृष्ठभागेन उजागरयितुं आवश्यकम् अस्ति ।

5JSONP क्रॉस्-डोमेन समस्यानां समाधानं करोति

1JSONP अवलोकनम्: JSONP उपयुज्यते<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持 CORS 的时，可以靠 JSONP 解决跨域。

२मूलभूतप्रक्रियाः १.

○प्रथमं चरणम् : ग्राहकः क<script>标签，并将其src属性设置为包含跨域请求的 URL，同时准备一个回调函数，这个回调函数用于处理返回的数据。
○चरण 2: अनुरोधं प्राप्त्वा सर्वरः callback function इत्यस्मिन् data encapsulate कृत्वा प्रत्यागच्छति।
○चरण 3: क्लायन्टस्य कॉलबैक् फंक्शन् आह्वयते, तथा च डाटा पैरामीटर् रूपेण कॉलबैक् फंक्शन् मध्ये पारितः भवति।

३दृष्टान्तः : १.

४ कोड उदाहरणानि : १.


<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 समाहित jsonp

?callback=?' इति नियतं प्रारूपं स्वयमेव विश्लेषणं भविष्यति


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

6क्रॉस्-डोमेन-समस्यानां समाधानार्थं प्रॉक्सी विन्यस्यताम्

6.1 स्वयं प्रॉक्सी सर्वरं विन्यस्यताम्

सर्वरयोः मध्ये क्रॉस्-डोमेन् समस्याः नास्ति ।


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

http-proxy-middleware इत्यनेन सह प्रॉक्सी विन्यस्यताम्


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

लाभ:

समृद्धकार्यं : http-proxy-middleware विविधप्रॉक्सी-आवश्यकतानां पूर्तये विन्यासविकल्पानां धनं प्रदाति ।
बहुविध-प्रॉक्सी-सम्बद्धानां लचीला-विन्यासः : बहुविध-प्रॉक्सी-सर्वर-विन्यस्तं कर्तुं शक्यते, यत् भिन्न-भिन्न-अन्तरफलक-मार्गेषु अनुरूपम् अस्ति ।
अनुरोधं अवरुद्धुं शक्नोति : अनुरोधं अवरुद्ध्य अनुकूलितसंसाधनकार्यद्वारा परिवर्तयितुं शक्यते ।

अभावः : १.

विन्यासः तुल्यकालिकरूपेण जटिलः अस्ति: भवद्भिः http-proxy-middleware पुस्तकालयस्य विन्यासनियमान् मापदण्डान् च अवगन्तुं आवश्यकम् ।
उत्पादनवातावरणानां कृते उपयुक्तं नास्ति : http-proxy-middleware मुख्यतया विकासवातावरणेषु उपयुज्यते तथा च उत्पादनवातावरणानां कृते उपयुक्तं नास्ति ।

प्रयोक्तव्याः दृश्याः : १.

कस्यापि निर्माणसाधनस्य उपयोगेन अग्रभागीयपरियोजनानां कृते उपयुक्तः तथा च कस्यापि विकाससर्वरस्य सह कार्यं करोति ।
यत्र बहुविधप्रॉक्सीसर्वरं लचीलतया विन्यस्तं कर्तव्यं तत्र परिदृश्यानां कृते उपयुक्तम् ।
यत्र अनुरोधानाम् अवरोधनं परिवर्तनं च करणीयम् इति परिदृश्यानां कृते उपयुक्तम् ।

6.2 प्रॉक्सी सर्वरस्य निर्माणार्थं Nginx इत्यस्य उपयोगं कुर्वन्तु

समग्रविचारः : nginx इत्ययं द्वौ भूमिकां निर्वहतु, स्थिरसामग्रीसर्वररूपेण अपि च प्रॉक्सीसर्वररूपेण च ।

nginx विन्यासं निम्नलिखितरूपेण परिवर्तयन्तु यत् nginx इत्यस्य मूलनिर्देशिका C ड्राइव् न भवति ।


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

2 अग्रे-अन्त-प्रकल्पं परिवर्तयन्तु येन सर्वे अनुरोधाः /dev -इत्यत्र अग्रे प्रेषिताः भवन्ति, ततः पुनः संकुलिताः भवन्ति


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

ततः प्रत्यक्षतया nginx सर्वरं अभिगन्तुं उदाहरणार्थं, यदि nginx पोर्ट् 8099 इत्यत्र चाल्यते तर्हि अभिगमनं कुर्वन्तु

http://localhost:8099

ततः भवन्तः refresh 404 समस्यां सम्मुखीकुर्वन्ति, तस्य समाधानार्थं nginx विन्यासं योजयन्तु


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

एतयोः "/" योजयित्वा देवः समाप्तः भवति

6.3 मचायाः साहाय्येन सर्वरस्य निर्माणं कुर्वन्तु

1. प्रॉक्सी विन्यस्तुं vue.config.js सञ्चिकायाः उपयोगं कुर्वन्तु:

Vue परियोजनायाः मूलनिर्देशिकायां vue.config.js सञ्चिकां रचयन्तु तथा च निम्नलिखितसङ्केतं योजयन्तु ।


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

उपरिष्टाद् कोड् मध्ये वयं उपयुञ्ज्महेdevServer प्रॉक्सी सर्वरं विन्यस्तुं विन्यासवस्तूनि ।इत्यस्मिन्‌proxyप्रॉक्सी-नियमान् विन्यस्तुं गुणाः उपयुज्यन्ते,/apiअन्तरफलकमार्गं सूचयति यस्य प्रॉक्सीकरणस्य आवश्यकता भवति ।targetविशेषता प्रॉक्सी इत्यस्य लक्ष्यसर्वर-सङ्केतं प्रतिनिधियति,changeOriginविशेषता सूचयति यत् अनुरोधस्य स्रोतसङ्केतं परिवर्तयितव्यम् वा इति ।pathRewriteअनुरोधितं मार्गं अधिलिखितुं प्रयुक्तः गुणः ।