欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

詳解vue或uni-app的跨域問(wèn)題解決方案

常見(jiàn)解決方案有兩種

創(chuàng)新互聯(lián)公司2013年成立，先為中方等服務(wù)建站，中方等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為中方企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

服務(wù)器端解決方案

服務(wù)器告訴瀏覽器：你允許我跨域

具體如何告訴瀏覽器，請(qǐng)看：

// 告訴瀏覽器，只允許 http://bb.aaa.com:9000 這個(gè)源請(qǐng)求服務(wù)器
$response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000');
// 告訴瀏覽器，請(qǐng)求頭里只允許有這些內(nèi)容
$response->header('Access-Control-Allow-Headers', 'Authorization, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, X-File-Type, Cache-Control, Origin');
// 告訴瀏覽器，只允許暴露'Authorization, authenticated'這兩個(gè)字段
$response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
// 告訴瀏覽器，只允許GET, POST, PATCH, PUT, OPTIONS方法跨域請(qǐng)求
$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
// 預(yù)檢
$response->header('Access-Control-Max-Age', 3600);

將以上代碼寫(xiě)入中間件：

// /app/Http/Middleware/Cors.php
<?php
namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Response;
class Cors {

  /**
   * Handle an incoming request.
   *
   * @param \Illuminate\Http\Request $request
   * @param \Closure $next
   * @return mixed
   */
  public function handle($request, Closure $next)
  {
    $response = $next($request);
    // 告訴瀏覽器，只允許 http://bb.aaa.com:9000 這個(gè)源請(qǐng)求服務(wù)器
    $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000');
    // 告訴瀏覽器，請(qǐng)求頭里只允許有這些內(nèi)容
    $response->header('Access-Control-Allow-Headers', 'Authorization, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, X-File-Type, Cache-Control, Origin');
    // 告訴瀏覽器，只允許暴露'Authorization, authenticated'這兩個(gè)字段
    $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
    // 告訴瀏覽器，只允許GET, POST, PATCH, PUT, OPTIONS方法跨域請(qǐng)求
    $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
    // 預(yù)檢
    $response->header('Access-Control-Max-Age', 3600);
    return $response;
  }

}

在路由上添加跨域中間件，告訴客戶端：服務(wù)器允許跨域請(qǐng)求

$api->group(['middleware'=>'cors','prefix'=>'doc'], function ($api) {
  $api->get('userinfo', \App\Http\Controllers\Api\UsersController::class.'@show');
  
})

客戶器端解決方案

欺騙瀏覽器，讓瀏覽器覺(jué)得你沒(méi)有跨域（其實(shí)還是跨域了，用的是代理）

在manifest.json里添加如下代碼：

// manifest.json
"devServer" : {
  "port" : 9000,
  "disableHostCheck" : true,
  "proxy": {
    "/api/doc": {
      "target": "http://www.baidu.com",
      "changeOrigin": true,
      "secure": false
    },
    "/api2": {
     .....
    }
  },
  
},

參數(shù)說(shuō)明

'/api/doc'

捕獲API的標(biāo)志，如果API中有這"/api/doc"個(gè)字符串，那么就開(kāi)始匹配代理，
比如API請(qǐng)求"/api/doc/userinfo",
會(huì)被代理到請(qǐng)求 "http://www.baidu.com/api/doc"
即：將匹配到的"/api/doc"替換成"http://www.baidu.com/api/doc"
客戶端瀏覽器最終請(qǐng)求鏈接表面是："http://192.168.0.104:9000/api/doc/userinfo"，
實(shí)際上是被代理成了："http://www.baidu.com/api/doc/userinfo"去向服務(wù)器請(qǐng)求數(shù)據(jù)

target

代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:9000
如果是域名需要額外添加一個(gè)參數(shù)changeOrigin: true，否則會(huì)代理失敗。

pathRewrite

路徑重寫(xiě)，也就是說(shuō)會(huì)修改最終請(qǐng)求的API路徑。
比如訪問(wèn)的API路徑：/api/doc/userinfo,
設(shè)置pathRewrite: {'^/api' : ''},后，
最終代理訪問(wèn)的路徑："http://www.baidu.com/doc/userinfo"，
將"api"用正則替換成了空字符串，
這個(gè)參數(shù)的目的是給代理命名后，在訪問(wèn)時(shí)把命名刪除掉。

changeOrigin

這個(gè)參數(shù)可以讓target參數(shù)是域名。

secure

secure: false,不檢查安全問(wèn)題。
設(shè)置后，可以接受運(yùn)行在 HTTPS 上，可以使用無(wú)效證書(shū)的后端服務(wù)器

其他參數(shù)配置查看文檔
https://webpack.docschina.org/configuration/dev-server/#devserver-proxy

請(qǐng)求封裝

uni.docajax = function (url, data = {}, method = "GET") {
 return new Promise((resolve, reject) => {
  var type = 'application/json'
  if (method == "GET") {
   if (data !== {}) {
    var arr = [];
    for (var key in data) {
     arr.push(`${key}=${data[key]}`);
    }
    url += `?${arr.join("&")}`;
   }
   type = 'application/x-www-form-urlencoded'
  }
  var access_token = uni.getStorageSync('access_token')
  console.log('token:',access_token)
  var baseUrl = '/api/doc/'
  uni.request({
   url: baseUrl + url,
   method: 'GET',
   data: data,
   header: {
    'content-type': type,
    'Accept':'application/x..v1+json',
    'Authorization':'Bearer '+access_token,
   },
   success: function (res) {
    if (res.data) {
     resolve(res.data)
    } else {
     console.log("請(qǐng)求失敗", res)
     reject(res)
    }
   },
   fail: function (res) {
    console.log("發(fā)起請(qǐng)求失敗~")
    console.log(res)
   }
  })
 })
}

請(qǐng)求示例：

//獲取用戶信息
uni.docajax("userinfo",{},'GET')
.then(res => {
  this.nickname = res.nickname
  this.avatar = res.avatar
});

到此這篇關(guān)于詳解vue或uni-app的跨域問(wèn)題解決方案的文章就介紹到這了,更多相關(guān)vue或uni-app的跨域問(wèn)題解決方案內(nèi)容請(qǐng)搜素創(chuàng)新互聯(lián)以前的文章或下面相關(guān)文章，希望大家以后多多支持創(chuàng)新互聯(lián)！

本文題目：詳解vue或uni-app的跨域問(wèn)題解決方案
文章源于：http://chinadenli.net/article36/ppghpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、用戶體驗(yàn)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站