修改.env
注意:IP與端口是後端服務器的地址
VUE_APP_API_URL='http://IP:端口/api'
VUE_APP_WS_URL='ws://IP:端口/wechat'
VUE_APP_NAME='公園商城'
修改vue.config.js
使前端可以代理
module.exports = {
assetsDir: "h5",
devServer:{
proxy:{
"/" : {
ws: true,
target: process.env.VUE_APP_API_URL,
changeOrigin: true
}
}
}
}
修改PHP代碼
app/middleware.php,重點是添加跨域支持的配置,原理是用全局中間件對回覆頭進行處理
<?php
return [
// 全局請求緩存
// \think\middleware\CheckRequestCache::class,
// 多語言加載
// \think\middleware\LoadLangPack::class,
// Session初始化
\think\middleware\SessionInit::class,
// 頁面Trace調試
// \think\middleware\TraceDebug::class,
// 跨域支持
\think\middleware\AllowCrossDomain::class
];
另外要修改一下\think\middleware\AllowCrossDomain::class,在Access-Control-Allow-Headers後面加上Authori-zation
class AllowOriginMiddleware implements MiddlewareInterface
{
/**
* header頭
* @var array
*/
protected $header = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Headers' => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With, Authori-zation',
'Access-Control-Allow-Methods' => 'GET,POST,PATCH,PUT,DELETE,OPTIONS,DELETE',
'Access-Control-Max-Age' => '1728000'
];
// .....省略一段代碼
}
經過測試,有些步驟不需要了,步驟正確的話,還是挺容易的,忘掉劃橫線的部分吧!!