解決CRMEB跨域問題

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

經過測試,有些步驟不需要了,步驟正確的話,還是挺容易的,忘掉劃橫線的部分吧!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章