Question

我有一个带有CORS问题的Laravel / Lumen后端。为了解决这些问题，我使用了以下软件包：https://github.com/barryvdh/laravel-cors

当我发出请求时，当我下载那里的任何cors切换扩展程序时，它都可以工作。以我的理解，这意味着CORS可以在我的服务器上工作，但是我需要向angular添加一些内容以使其完全正常工作。正如开发人员在github上指出的那样：“请求必须是有效的CORS请求，并且需要包含“ Origin”标头”

我可以通过任何方式添加此标头吗？预先感谢

Answer 1

您还应该在angularjs请求中添加cors标头。

例如

                    $http({

                        method: 'POST',

                        data: data,

                        url: " url of post request",

                         withCredentials: false,

                         headers: {
                        'Content-Type': 'application/json',
                        'Access-Control-Allow-Origin' : "url of laravel",
                        'Access-Control-Allow-Methods': 'POST',
                        'Access-Control-Allow-Credentials' : false
                    }

Answer 2

我在一些方面也遇到了类似的问题。我发现的最佳解决方案是实现一个进行路由的proxy.conf.json配置文件，而不是直接与CORS混淆。您可以使用

实现它

    ng serve --proxy-config proxy.conf.json

这可以使CORS有效，而无需在浏览器上安装任何插件。我离开了CORS插件，因为我忘记了在“野外冲浪”时将其关闭，这使我容易受到黑客的攻击。</ p>

您可以在this stackoverflow thread

上详细了解如何实施此解决方案。

Answer 3

我不确定您需要哪个标头，但是如果您想向所有请求添加一些标头，则可以像这样创建自定义HttpIntercetor：

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class HttpCustomInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authRequest = request.clone({
      setHeaders: {
        Origin: 'WhateverYouWantTo'
      }
    });

    return next.handle(authRequest);
  }
}

如果您只想对某些特定请求（即GET）执行此操作，则可以在intercept方法内放置一些if语句。然后在模块内使用HttpCustomInterceptor作为HTTP_INTERCEPTOR的提供者：

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpClientInterceptor,
      multi: true,
    }
  ]
})
export class AppModule { }

希望有帮助。

Answer 4

如果使用nginx作为后端，则可以通过在服务器配置中添加以下标头来解决此问题：

var httpPostedFiles = HttpContext.Current.Request.Files;     
if (httpPostedFiles.Count > 0)
     {
          var FirstFile= httpPostedFiles["first-file"]
          var SecondFile = httpPostedFiles["second-file"]
     }

Access-Control-Allow-Origin标头指定接受域的域。您可以使用域URL或*接受来自任何域的请求。如果您将多个子域用于前端，则应使用*并在应用程序级别阻止访问。

该请求必须是有效的CORS请求，并且需要包含“ Origin”标头。角度的

4 个答案: