Mapbox—geocoder搜索地點error eaching the server

——There was an errorr eaching the server

環境說明：

vue3.3.4

mapbox-gl: 2.13.0

@mapbox/mapbox-gl-geocoder: 4.7.4

一、錯誤呈現

​ 當地圖初始化成功後，添加mapbox geocoder的控制項，本地開發環境測試沒有問題，vue3環境使用vite打包後，檢索地點（北京）出現There was an errorr eaching the server的錯誤提示。

​ 此時的網路請求如下：

二、解決辦法

經過對比本地開發測試的成功案例，和打包後的錯誤請求，再加上mapbox/mapbox-gl-geocoder源碼（https://github.com/mapbox/mapbox-gl-geocoder）學習，解決辦法如下：

• 錯誤原因：根據輸入地點檢索符合城市信息的網路請求缺少 access_token，並且錯誤的網路請求前面的地址是本地的IP，正確的應該為https://api.mapbox.com

• 解決思路：更改源碼

  原理：在網路請求前添加access_token請求參數，並且更改請求地址

1. 傳入前端傳遞的access_token

// *\node_modules\@mapbox\mapbox-gl-geocoder\lib\index.js
// _geocode函數內部
const config = this._setupConfig(requestType, searchInput);
// 此處添加
config.access_token = this.options.accessToken; // 添加的token

var request;
switch (requestType) {
  case GEOCODE_REQUEST_TYPE.LOCAL:
    request = Promise.resolve();
    break;
  case GEOCODE_REQUEST_TYPE.FORWARD:
    request = this.geocoderService.forwardGeocode(config).send();
    break;
  case GEOCODE_REQUEST_TYPE.REVERSE:
    request = this.geocoderService.reverseGeocode(config).send();
    break;
}

2. 添加傳入數據的驗證信息

// node_modules\@mapbox\mapbox-sdk\services\geocoding.js
// Geocoding.forwardGeocode函數
v.assertShape({
  query: v.required(v.string),
  mode: v.oneOf('mapbox.places', 'mapbox.places-permanent'),
  countries: v.arrayOf(v.string),
  proximity: v.oneOf(v.coordinates, 'ip'),
  types: v.arrayOf(v.oneOf(featureTypes)),
  autocomplete: v.boolean,
  bbox: v.arrayOf(v.number),
  limit: v.number,
  language: v.arrayOf(v.string),
  routing: v.boolean,
  fuzzyMatch: v.boolean,
  worldview: v.string,
  // 此處添加
  access_token: v.string, // 添加access_token驗證，如果不添加則傳入參數會報錯：驗證失敗
})(config);

3. 修改請求參數

備註：可以把config.access_token固定，換成自己的mapbox token，這樣步驟1和2就不需要更改（下文是根據前端傳入的token動態進行變更）

// node_modules\@mapbox\mapbox-sdk\services\geocoding.js
// Geocoding.forwardGeocode函數
return this.client.createRequest({
    method: 'GET',
    // 此處修改，添加https://api.mapbox.com首碼 和 "?access_token=" + config.access_token尾碼
    path: 'https://api.mapbox.com/geocoding/v5/:mode/:query.json' + "?access_token=" + config.access_token,
    params: pick(config, ['mode', 'query']),
    query: query
  });