詳解vue或uni-app的跨域問(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);
將以上代碼寫入中間件:
// /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è)字符串,那么就開始匹配代理,
比如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
路徑重寫,也就是說(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ú)效證書的后端服務(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)搜素腳本之家以前的文章或下面相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
Vue 2.0入門基礎(chǔ)知識(shí)之內(nèi)部指令詳解
這篇文章主要介紹了Vue 2.0入門基礎(chǔ)知識(shí)之內(nèi)部指令知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值 ,需要的朋友可以參考下2017-10-10
vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新,這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
elementui 日期選擇器el-date-picker如何給指定日期添加圓點(diǎn)標(biāo)注
這篇文章主要介紹了elementui 日期選擇器el-date-picker如何給指定日期添加圓點(diǎn)標(biāo)注,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
vue3使用ref獲取dom結(jié)果為'null'的原因詳析
這篇文章主要給大家介紹了關(guān)于vue3使用ref獲取dom結(jié)果為'null'的原因詳析,ref是Vue3中一個(gè)非常重要的功能,它可以用來(lái)獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對(duì)DOM節(jié)點(diǎn)的操作,需要的朋友可以參考下2023-07-07
vue3中addRoute路由變化頁(yè)面未刷新問(wèn)題解決
這篇文章主要為大家介紹了vue3中addRoute路由變化但頁(yè)面未刷新問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
Element中的Cascader(級(jí)聯(lián)列表)動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法
這篇文章主要介紹了Element中的Cascader(級(jí)聯(lián)列表)動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)示例代碼
大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求,在有打印需求時(shí),對(duì)前端來(lái)說(shuō)當(dāng)然是直接打印頁(yè)面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue判斷內(nèi)容是否滑動(dòng)到底部的三種方式
這篇文章主要介紹了vue判斷內(nèi)容是否滑動(dòng)到底部的三種方式,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
vue3的setup語(yǔ)法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語(yǔ)法如何自定義v-model為公用hooks,文章分為兩個(gè)部分介紹,簡(jiǎn)單介紹vue3的setup語(yǔ)法如何自定義v-model和如何提取v-model語(yǔ)法作為一個(gè)公用hooks2022-07-07

