请求的资源上没有“ Access-Control-Allow-Origin”标头-Ionic 3和Laravel

时间:2019-05-09 23:04:57

标签: laravel cors ionic3

我正在尝试将我的应用程序与Laravel中的后端服务器连接

我有一个拦截器,用于在请求中添加标头:

ToothGrowth %>%
  mutate(dose = factor(dose),
         cons = 1) %>%
  ggplot(aes(x = cons, y = len)) +
  geom_boxplot(aes(fill = dose)) +
  facet_wrap(~supp, strip.position = "bottom") +
  theme_bw(base_size = 20) +
  scale_y_continuous(sec.axis = dup_axis(labels = NULL,name = NULL)) +
  scale_x_continuous(labels = NULL, breaks = 1, sec.axis = dup_axis(labels = NULL,name = NULL)) +
  theme(strip.placement = "outside",
        strip.background = element_rect(color = "white", fill = "white"),
        panel.spacing.x = unit(0, "mm"),
        axis.title.x = element_blank())

}

在服务器上,我有一个中间件:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('----------------- SESSION -----------------');
console.log(this.session.token);

this.token = this.session.token;
const headers = this.buildRequestHeaders();
const authRequest = req.clone({
  setHeaders: {
    'Access-Control-Allow-Credentials': 'false',
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type",
    "Access-Control-Allow-Methods": "OPTIONS,POST,GET",
    'Authorization': `Bearer ${this.token}`
  }
});

return next.handle(authRequest);

这是我的问题: https://i.stack.imgur.com/CG9Tq.png

这是发送到服务器的请求。显然我的Access-Control-Allow-Originis添加在Request标头中: https://i.stack.imgur.com/WXN0L.png

1 个答案:

答案 0 :(得分:0)

如果看到错误状态Response to Pre-flight request doesn't pass the control check,请在此控件中检查服务器是否告诉浏览器或客户端,允许它向浏览器或客户端发出请求。在您提出原始请求之前会触发此请求。您正在控制器中设置标头,请求在到达控制器之前被拒绝

在其handle方法中创建一个名为Cors的中间件:

 public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*')
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
          ->header('Access-Control-Allow-Headers', 'content-type, authorization, x-requested-with');
    }

并在 Kernel.php 中传递您新创建的中间件。

 protected $middleware = [ 
    \App\Http\Middleware\Cors::class, 
];

您不需要在离子客户端中传递access-control标头,这些标头由服务器在预检期间生成,以使客户端知道服务器所允许的内容。 设置标头,例如

setHeaders: {
   Accept: `application/json`,
  'Content-Type': `application/json`,
   Authorization: `Bearer ${this.token}`
   }

JWT-Auth还带有内置的中间件,可以检查请求是否是由经过身份验证的实体提供的,只需在受保护的路由上使用它即可

jwt.auth = \Tymon\JWTAuth\Middlware\GetUserFromToken::class