一、跨域是什么？

跨域問(wèn)題指的是在瀏覽器端，當(dāng)一個(gè)網(wǎng)頁(yè)的腳本（如JavaScript）向另一個(gè)域名的網(wǎng)站發(fā)起請(qǐng)求時(shí)，如果兩個(gè)網(wǎng)站的域名不一致，就會(huì)出現(xiàn)跨域問(wèn)題。由于瀏覽器的同源策略（Same Origin Policy），默認(rèn)情況下，腳本只能訪問(wèn)同一個(gè)域名下的資源，不能訪問(wèn)其他域名下的資源。

二、跨域問(wèn)題的解決方法

1.JSONP

JSONP (JSON with Padding) 是一種在客戶端與服務(wù)器之間進(jìn)行跨域數(shù)據(jù)傳輸?shù)慕鉀Q方案，它利用了

2.Nginx反向代理

Nginx是一款高性能的Web服務(wù)器和反向代理服務(wù)器，可以用于解決跨域問(wèn)題。具體實(shí)現(xiàn)方法是在Nginx的配置文件中添加反向代理規(guī)則，將請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，并將響應(yīng)返回給客戶端。
下面是一個(gè)簡(jiǎn)單的Nginx反向代理配置示例，用于將客戶端請(qǐng)求轉(zhuǎn)發(fā)到http://api.example.com，并解決跨域問(wèn)題。
示例代碼：

server {
  listen 80;
  server_name www.example.com;

  location /api {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    proxy_pass http://api.example.com;
  }
}

在上面的配置中，定義了一個(gè)Nginx服務(wù)器，監(jiān)聽(tīng)80端口，并將所有以/api開(kāi)頭的請(qǐng)求轉(zhuǎn)發(fā)到http://api.example.com，同時(shí)設(shè)置了一些響應(yīng)頭信息，從而實(shí)現(xiàn)了跨域訪問(wèn)。

需要注意的是，由于涉及到跨域訪問(wèn)，需要設(shè)置響應(yīng)頭的Access-Control-Allow-*字段，以允許跨域訪問(wèn)。此外，還需要設(shè)置Nginx的CORS配置，從而更好地控制跨域訪問(wèn)的安全性。

3.CORS解決跨域問(wèn)題

CORS（Cross-Origin Resource Sharing）是一種跨域資源共享的機(jī)制，可以用于解決跨域問(wèn)題。CORS機(jī)制允許服務(wù)器在響應(yīng)中設(shè)置一個(gè)Access-Control-Allow-Origin頭部，來(lái)指定允許哪些域名訪問(wèn)資源。

具體實(shí)現(xiàn)方法是，在服務(wù)器端向每一個(gè)響應(yīng)添加一個(gè)Access-Control-Allow-Origin頭部，來(lái)指定允許哪些域名訪問(wèn)資源。如果請(qǐng)求的域名與允許訪問(wèn)的域名一致，則請(qǐng)求可以順利完成；否則，瀏覽器會(huì)阻止請(qǐng)求，從而保證安全性。

下面是一個(gè)簡(jiǎn)單的CORS配置示例，用于允許http://www.example.com和https://www.example.com訪問(wèn)資源。

Access-Control-Allow-Origin: http://www.example.com,https://www.example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

在上面的示例中，Access-Control-Allow-Origin頭部指定了允許訪問(wèn)的域名，Access-Control-Allow-Methods頭部指定了允許的HTTP方法，Access-Control-Allow-Headers頭部指定了允許的請(qǐng)求頭信息。需要注意的是，由于涉及到安全性，需要仔細(xì)控制允許訪問(wèn)的域名和請(qǐng)求頭信息，以避免安全漏洞。

需要注意的是，CORS機(jī)制只能用于瀏覽器端，即僅限于XMLHttpRequest和Fetch API這兩種請(qǐng)求。對(duì)于其他類型的請(qǐng)求，比如通過(guò)curl工具發(fā)送的請(qǐng)求，無(wú)法使用CORS機(jī)制來(lái)解決跨域問(wèn)題，需要使用其他方法，比如Nginx反向代理。

4.postMessage解決跨域問(wèn)題

postMessage是一種可以用于解決跨域問(wèn)題的技術(shù)，它是HTML5中引入的一種跨文檔消息傳遞機(jī)制。具體實(shí)現(xiàn)方法是，在發(fā)送消息的窗口中調(diào)用postMessage方法，向接收消息的窗口發(fā)送消息，并在接收消息的窗口中監(jiān)聽(tīng)message事件，接收消息并進(jìn)行處理。

下面是一個(gè)簡(jiǎn)單的postMessage示例，在兩個(gè)不同域名的頁(yè)面之間進(jìn)行消息傳遞：

在發(fā)送消息的頁(yè)面中，可以使用以下代碼向接收消息的頁(yè)面發(fā)送消息：

var receiver = window.opener || window.parent;
receiver.postMessage('Hello, world!', 'http://www.example.com');

在接收消息的頁(yè)面中，可以使用以下代碼監(jiān)聽(tīng)message事件，并處理接收到的消息：

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://www.example.com') return;
  console.log('Received message:', event.data);
});

在上面的代碼中，使用addEventListener方法監(jiān)聽(tīng)message事件，在事件處理函數(shù)中判斷消息來(lái)源是否合法，并進(jìn)行處理。

需要注意的是，postMessage技術(shù)可以用于解決跨域問(wèn)題，但也存在一定的安全風(fēng)險(xiǎn)。因?yàn)閜ostMessage方法可以向任意窗口發(fā)送消息，如果接收消息的窗口沒(méi)有進(jìn)行安全控制，可能會(huì)被惡意網(wǎng)站利用，從而造成安全漏洞。因此，在使用postMessage技術(shù)時(shí)，需要仔細(xì)考慮安全性問(wèn)題，并進(jìn)行必要的安全控制。

5.WebSocket解決跨域問(wèn)題

WebSocket是一種可以用于解決跨域問(wèn)題的技術(shù)，它是HTML5中引入的一種雙向通信協(xié)議。WebSocket協(xié)議使用標(biāo)準(zhǔn)的HTTP端口（80和443），可以通過(guò)HTTP代理服務(wù)器進(jìn)行通信，因此可以用于跨域通信。

下面是一個(gè)簡(jiǎn)單的WebSocket示例，在兩個(gè)不同域名的頁(yè)面之間進(jìn)行通信：

在客戶端頁(yè)面中，可以使用以下代碼建立WebSocket連接：

var socket = new WebSocket('ws://www.example.com/socket');
socket.addEventListener('open', function(event) {
  console.log('WebSocket connected');
  socket.send('Hello, world!');
});
socket.addEventListener('message', function(event) {
  console.log('Received message:', event.data);
});

在服務(wù)端頁(yè)面中，可以使用以下代碼監(jiān)聽(tīng)WebSocket連接，并處理接收到的消息：

var WebSocketServer = require('ws').Server;
var server = new WebSocketServer({ port: 8080 });
server.on('connection', function(socket) {
  console.log('WebSocket connected');
  socket.on('message', function(message) {
    console.log('Received message:', message);
    socket.send('Hello, world!');
  });
});

在上面的代碼中，使用WebSocket對(duì)象的send方法向服務(wù)端發(fā)送消息，并使用addEventListener方法監(jiān)聽(tīng)message事件，在事件處理函數(shù)中處理接收到的消息。

需要注意的是，WebSocket技術(shù)可以用于解決跨域問(wèn)題，但也存在一定的安全風(fēng)險(xiǎn)。因?yàn)閃ebSocket協(xié)議允許任意域名的頁(yè)面建立連接，如果服務(wù)端沒(méi)有進(jìn)行安全控制，可能會(huì)被惡意網(wǎng)站利用，從而造成安全漏洞。因此，在使用WebSocket技術(shù)時(shí)，需要仔細(xì)考慮安全性問(wèn)題，并進(jìn)行必要的安全控制。

6.devServer代理跨域

在Webpack中，可以使用devServer配置中的proxy選項(xiàng)進(jìn)行跨域代理。devServer代理跨域可以將請(qǐng)求代理到另一個(gè)服務(wù)器，從而解決跨域問(wèn)題。具體實(shí)現(xiàn)方法是，在Webpack的配置文件中配置devServer選項(xiàng)，設(shè)置proxy選項(xiàng)，將請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，并在響應(yīng)中添加Access-Control-Allow-Origin頭部，實(shí)現(xiàn)跨域訪問(wèn)。

下面是一個(gè)簡(jiǎn)單的devServer代理跨域示例配置：

devServer: {
  proxy: {
    '/api': {
      target: 'http://www.example.com',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    }
  }
}

在上面的配置中，定義了一個(gè)代理規(guī)則，將所有以/api開(kāi)頭的請(qǐng)求轉(zhuǎn)發(fā)到http://www.example.com，并設(shè)置了一些選項(xiàng)，比如changeOrigin表示是否修改請(qǐng)求頭中的Host字段，pathRewrite表示是否對(duì)請(qǐng)求路徑進(jìn)行重寫，headers表示需要添加到響應(yīng)頭中的頭部信息。

需要注意的是，由于涉及到跨域訪問(wèn)，需要設(shè)置響應(yīng)頭的Access-Control-Allow-Origin字段，以允許跨域訪問(wèn)。此外，還需要設(shè)置Nginx的CORS配置，從而更好地控制跨域訪問(wèn)的安全性。

需要注意的是，devServer代理跨域只適用于開(kāi)發(fā)環(huán)境，不適用于生產(chǎn)環(huán)境。在生產(chǎn)環(huán)境中，需要使用其他跨域解決方案，比如Nginx反向代理。

附：iframe實(shí)現(xiàn)跨域

iframe(src){
            //數(shù)組
            if(Array.isArray(src)){
                this.docs.visible = true;
            }else{
                this.docs.visible = false;
                
            }
            this.link  = src
            if(this.docs.visible == false){
                if(this.$refs['ruleIframe'] && this.$refs['ruleIframe'].querySelector('iframe')){
                    this.$refs['ruleIframe'].querySelector('iframe').remove()    //刪除自身
                }
                var iframe = document.createElement('iframe');
                iframe.width = '100%';
                iframe.height = '100%';
                iframe.setAttribute('frameborder','0')
                iframe.src = src;                
                this.append(iframe)
            }
            
        },
        //創(chuàng)建元素 防止  獲取不到 ruleIframe 遞歸
        append(iframe){
            if(this.$refs['ruleIframe']){
                this.$refs['ruleIframe'].appendChild(iframe);
                return
            }
            setTimeout(()=>{
                this.append(iframe);
            },500)    
        },

總結(jié)

到此這篇關(guān)于Vue學(xué)習(xí)筆記之跨域的6種解決方案的文章就介紹到這了,更多相關(guān)Vue跨域解決方案內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論