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

Posted 2023-03-04

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

【英文标题】：The request has to be a valid CORS request and needs to include an "Origin" header. Angular

【发布时间】：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 标头？

【参考方案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 *** 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 或 * 来接受来自任何域的请求。 如果您在前端使用多个子域，则应使用 * 并在应用程序级别阻止访问。