修改.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'
    ];
    // .....省略一段代码
}

经过测试，有些步骤不需要了，步骤正确的话，还是挺容易的，忘掉划横线的部分吧！！