uniapp開發跨域問題的解決辦法

什么是跨域

跨域是瀏覽器的專用概念，指js代碼訪問自己來源站點之外的站點。比如A站點網頁中的js代碼，請求了B站點的數據，就是跨域。
A和B要想被認為是同域，則必須有相同的協議（比如http和https就不行）、相同域名、和相同端口號（port）。

開發時如果前端代碼和后端接口沒有部署在同域服務器，就會被瀏覽器報跨域。

如果前端要連接傳統后台服務器

分部署時的跨域方案和調試時的跨域方案，具體見下：

1.部署時的跨域解決方案

• 方案1：最利索的，當然還是將前端代碼和后端接口部署在同域的web服務器上
• 方案2：由后台服務器配置策略，設為允許跨域訪問。

例如：前端頁面部署在uniCloud的前端頁面托管里，但是需要訪問自己服務器的接口，這時候需要在服務端允許前端頁面托管的域名跨域訪問。不同的服務端框架允許跨域的配置不一樣，這里不再一一列舉僅以eggjs為例。

（1）安裝egg-cors包

npm i egg-cors --save

（2）在plugin.js中設置開啟cors

exports.cors = {  
  enable: true, package: 'egg-cors', };

（3）在config.default.js中配置

config.security = {  
  domainWhiteList: [ '前端網頁托管的域名' ], };

2.調試時的跨域解決方案

前端工程師調試時，運行起來的前端代碼在uni-app自帶的web服務器中，而不是部署在后台業務服務器上，此時就會遇到跨域。
除了協調后端配置允許跨域，其實也可以自己解決跨域問題。共3種方案可選。

方案1 使用HBuilderX內置瀏覽器

這個內置瀏覽器經過官方處理，不存在跨域問題，簡單易用，推薦使用。（需HBuilderX 2.6以上）
在打開頁面后，點HBuilderX右上角的預覽，即可打開內部瀏覽器。或者在運行菜單里選擇運行到內置瀏覽器也可以。

 

方案2 配置webpack-dev-server代理

詳細的配置指南，這里就直接貼地址了：https://juejin.im/post/5e43b2645188254902765766

根據官方文檔的描述，devServer配置被要求在manifest.json去配置，並且由於這個配置文件是json格式的，所以只能對簡單類型進行配置。但對於proxy這項配置來說也是足夠了的。直接如下方式配置即可解決:

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/prefix/api/user/list": {
                    "target": "https://api-remote.xxxx.com",
                    "pathRewrite": {
                        "^/prefix": ""
                    }
                }
            }
        }
    }
}

另一種解決方案

直接創建一個vue.config.js文件，並在里面配置devServer，直接上代碼

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/prefix/api/user/list': {
        target: 'https://api-remote.xxxx.com',
        pathRewrite: {
          '^/prefix': ''
        }
      }
    },
  }
}

 

這種辦法的好處顯而易見，用js而非json去配置會更加的靈活，需要注意的是以上兩種方案不能同時使用，第一種會覆蓋第二種方案。

方案3 給瀏覽器安裝跨域插件，禁止瀏覽器報跨域

本插件並非萬能，請仔細閱讀與學習瀏覽器安全策略相關知識，不懂這些知識在評論里瞎噴的，官方不會回復。

當我們使用谷歌瀏覽器調試ajax請求的時候可能會遇到這兩個問題：

• 跨域資源共享 詳見：CORS
• 跨源讀取阻塞 詳見：CORB

最常見的就是關於跨域資源共享的問題，也就是我們通常說的跨域。當我們本地服務器預覽頁面，使用ajax訪問遠程服務器的內容時就會請求失敗，比如：本地預覽的地址是：http://localhost:8080/，訪問的接口地址是http://dcloud.io/api。

如果僅僅是為了本地預覽，可以使用Chrome瀏覽器插件來協助調試。
!!! 本插件只能解決簡單請求的跨域調試（點擊搜索什么是簡單請求）。對於非簡單請求的OPTION預檢（點擊搜索什么是預檢請求）以及線上服務器也有跨域需求的用戶，可以服務端配合解決。

Chrome插件名稱：Allow-Control-Allow-Origin: *

安裝方式：

• 在線安裝
  使用谷歌瀏覽器直接打開插件地址https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi安裝即可
• 離線安裝
  國內用戶如果無法在線安裝，可在本頁面底部下載附件，離線安裝
  1. 下載得到:Allow-Control-Allow-Origin.crx
  2. 點擊瀏覽器右上角的菜單按鈕打開谷歌瀏覽器的擴展管理頁面

 

 

1. 將下載的擴展插件拖入擴展管理頁面

 

 

 

 

使用方式

1. 打開待調試的頁面
2. 在擴展欄目找到安裝的插件，點擊打開插件配置
3. 輸入想要進行跨域調試的接口的地址，點擊添加即可

 

注意事項

• 此插件適合本地調試使用，線上部署如果和接口不同域還需要服務端配合。
• 如果實際響應的內容與瀏覽器預期的內容有差異還可能被CORB策略所阻止。

firefox跨域插件

firefox跨域插件(注意firefox的css兼容問題)