从服务器获取数据的角度删除 CORS 错误答案

【问题标题】：Angular remove CORS error fetching data from server从服务器获取数据的角度删除 CORS 错误
【发布时间】：2019-05-16 15:37:11
【问题描述】：

我的应用程序基于 Angular + NGRX 构建，从服务器获取数据。服务器正在托管基于 Java Spring 构建的服务。

Spring 服务托管在特定域上，因此在 Angular 中我们使用特定 url 访问它们

 http://JavaService-hostedDomain/ServiceName

在 spring 中为他们构建了特定的控制器@GetMapping(/ServiceName)

现在我面临的问题是要查看应用程序，我必须使用禁用 chrome web 安全性

--disable web security chrome command to launch chrome 那么应用程序正在正确加载。

在不禁用 Chrome 网络安全的情况下在 chrome 中运行时，我收到以下错误

XMLHttpRequest cannot load http://localhost:4200/url. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何解决上述 CORS 错误，Angular（客户端）或 Java（服务器端）是否需要更改？

如果可能的话，有什么方法可以通过仅在 Angular 端进行更改来解决这个问题？

【问题讨论】：

标签： javascript java ajax angular

【解决方案1】：

我多次遇到这个问题，它必须从服务器端解决，因为我不了解 java，但您需要设置可以接受哪些来源来向您的服务器发出请求，因为浏览器会阻止所有安全尝试.

例如在 Laravel (PHP) 中，我安装了一个管理 CORS 的库，如下所示：

/*
|--------------------------------------------------------------------------
| Laravel CORS
|--------------------------------------------------------------------------
|
| allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
| to accept any value.
|
*/

'supportsCredentials' => false,
'allowedOrigins' => ['*'], // HOST allowed for making request
'allowedOriginsPatterns' => [],
'allowedHeaders' => ['*'],
'allowedMethods' => ['GET', 'POST', 'PUT',  'DELETE', 'OPTIONS'],
'exposedHeaders' => [],
'maxAge' => 0,
'hosts' => ['*']

希望以上内容能给你一个思路

检查这个java spring： https://spring.io/guides/gs/rest-service-cors/

问候

【讨论】：