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

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 插件，因为我在"野外冲浪"时忘记关闭它们，这让我暴露在黑客面前。

您可以在此堆栈溢出线程中阅读有关如何实现此解决方案的更多信息

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然后，您可以在方法中放置一些if语句intercept。然后使用HttpCustomInterceptor作为模块内部HTTP_INTERCEPTOR的提供程序：

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

希望有帮助。

Answer 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;
}

访问控制允许源标头指定要接受其请求的域。 您可以使用您的域 URL 或 * 来接受来自任何域的请求。 如果将多个子域用于前端，则应使用 * 并在应用程序级别阻止访问。