如何解決uniapp跨域問題

一、什麼是uniapp跨域問題

1、跨域是瀏覽器為了防止CSRF攻擊，而採用的一種安全機制，同源作用域下的頁面之間，由於JavaScript的訪問限制，不能進行非同源的互操作。

2、如果你的uniapp應用需要訪問不同源的接口（例如訪問RESTful API獲取數據），由於跨域機制的限制，uniapp應用是無法直接訪問這些接口的，這就是uniapp跨域問題。

二、uniapp跨域解決方案

方案1：在服務端實現跨域

1、在服務端實現跨域，是解決跨域問題最為簡單直接的方式。在服務端（例如Node.js）中設置Access-Control-Allow-Origin頭，可以允許所有域名的請求訪問接口。

2、以Node.js為例，實現跨域的代碼示例如下：

  
    const http = require('http');
    const server = http.createServer(function(req,res){
        res.setHeader('Access-Control-Allow-Origin','*');
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write('Hello World!');
        res.end();
    });
    server.listen(3000);
  

方案2：使用JSONP技術

1、JSONP（JSON with Padding）是一種跨域訪問數據的方式，由於瀏覽器對於script標籤的訪問是沒有跨域限制的，因此JSONP利用script標籤來訪問跨域接口，然後通過服務端動態生成JavaScript代碼返回數據，從而實現跨域訪問數據的目的。

2、以uniapp中使用JSONP訪問跨域接口的代碼示例如下：

  
    import jsonp from 'jsonp';
 
    jsonp('http://api.example.com', null, function (err, data) {
      if (err) {
        console.error(err);
      } else {
        console.log(data);
      }
    });
  

方案3：使用uniapp內置的網絡請求API

1、uniapp本身提供了一套網絡請求API，可以很方便地在uniapp中訪問不同源的接口。由於uniapp底層已經對HTTP請求做了同源策略解決，因此使用這套API就可以不必擔心跨域問題了。

2、代碼示例如下：

  
    this.$http.get('http://api.example.com').then((response) => {
      console.log(response.data);
    }).catch((error) => {
      console.log(error);
    });
  

三、總結

1、在uniapp中訪問不同源的接口，會遇到跨域問題。

2、解決uniapp跨域問題的方案包括：在服務端實現跨域、使用JSONP技術、使用uniapp內置的網絡請求API。