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

【问题标题】：The request has to be a valid CORS request and needs to include an "Origin" header. Angular该请求必须是有效的 CORS 请求，并且需要包含“Origin”标头。角
【发布时间】：2019-02-23 09:13:36
【问题描述】：

我的 Laravel/Lumen 后端存在 CORS 问题。为了解决这些问题，我使用了这个包：https://github.com/barryvdh/laravel-cors

当我提出请求时，它会在我下载任何现有的 cors 切换扩展时工作。据我了解，这意味着 CORS 可以在我的服务器上运行，但我需要在 angular 中添加一些内容以使其完全正常工作。正如开发人员在 github 上所说：“请求必须是有效的 CORS 请求，并且需要包含“Origin”标头”

我可以以任何方式添加此标题吗？提前致谢

【问题讨论】：

这通常由浏览器处理，因此您不需要添加任何客户端。更多关于 CORS 的信息在这里developer.mozilla.org/en-US/docs/Web/HTTP/CORS
好吧，我可能忘了提到它是用于加载 Angular 的 Cordova 应用程序。
所以当你调试应用的 webview 时，你看不到 Origin 标头？

标签： angular laravel cors lumen

【解决方案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
                    }

【讨论】：

【解决方案2】：

我曾在几个方面处理过类似的问题。我发现的最佳解决方案是实现一个 proxy.conf.json 配置文件来执行路由，而不是直接搞乱 CORS。您使用

实现它

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

这使 CORS 保持有效，无需在您的浏览器或其他地方安装任何插件。我放弃了 CORS 插件，因为我在“野外冲浪”时忘记关闭它们，这让我很容易受到黑客攻击。

您可以在this stackoverflow thread 阅读有关如何实施此解决方案的更多信息

【讨论】：

【解决方案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 { }

希望对您有所帮助。

【讨论】：

【解决方案4】：

如果你使用 nginx 作为后端，你可以通过在服务器配置中添加这些头来解决这个问题：

location ~ \.php$ {
    [...]
    add_header "Access-Control-Allow-Origin"   * always;
    add_header "Access-Control-Allow-Methods"  "GET, POST, DELETE, PUT, OPTIONS, HEAD" always;
    add_header "Access-Control-Allow-Headers"  "DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range, Authorization, Origin, Accept, Accept-Language" always;
    add_header "Access-Control-Expose-Headers" "Content-Length,Content-Range" always;
}

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

【讨论】：