我爱编程

对于 Laravel 路由请求跨域问题的解决方案

2018-04-09  本文已影响165人  Martain

对于Laravel 路由请求跨域问题的解决方案 (未整理,很乱版,太懒了)

一、创建添加 响应头 的中间件,并将中间件分配给每个路由

php artisan make:Middleware OpenRequest
//修改OpenRequest 的handle方法
 public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
//        $response->header('Access-Control-Allow-Credentials', 'true');
        return $response;
    }

二、添加OpenRequest到\app\Http\Kernel.php里面去,这样才会生效。

//1、如果是全局开启跨域,则添加到 $middleware 
   /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
 protected $middleware = [
                ...
            OpenRequest::class,
              ...
                    ]
//2、如果你只是想给某些路由开启跨域,则添加到 $routeMiddleware 中去
/**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
              ...,
        'openrequest'=>OpenRequest::class,
              ...
                      ]

三、绑定到控制器,控制器下所有的方法路由都回经过该中间件,需要重写控制器的__construct() 方法。

  public function __construct()
    {
        $this->middleware("openrequest");
    }

四、如果仅对个别路由开启跨域,可以直接绑定到路由上。

Route::get('/test','xxxx@xx')->middleware('openrequest')

1、对于post的坑 以axios为例子,post需要添加请求头

this.axios.post('/api/admin/login',{admin:"Martain"},{
        header:{
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(response=>{
          console.log(response.data);
        }).catch(response=>{
                console.log(response);
            });

跨域在后端设置就行,前端中如果用到withCredentials: true,那么后端需要设置response.setHeader("Access-Control-Allow-Credentials", "true");才能使cookie携带上来,同时,Access-Control-Allow-Origin这个白名单需要设置当前前端访问时的浏览器上的域名或ip。

//文件上传
问题讨论:post请求Content-type到底该不该设置
我得出的结论是,要正确设置。fetch 发送post字符类请求时,

非文件上传时,无关你发送的数据格式是application/x-www-form-urlencoded或者application/json格式数据,你不设置请求头,fetch会给你默认加上一个Content-type = text/xml类型的请求头,有些第三方JAX可以自己识别发送的数据,并自己转换,但feth绝对不会,不行,你可以试一下;

文件上传请求时,因为不知道那个boundary的定义方式,所以就如建议的一样,我们不设置Content-type。
注:我用element-ui upload 上传图片时,遇到很多坑,我找了无数的header,都不行,最后发现说不要设置,就真的好了

上一篇下一篇

猜你喜欢

热点阅读