Angular '；访问控制允许原点'；标头有一个值'；http://localhost:4200' 这不等于提供的原点

（标题中错误消息的继续）“来源”因此不允许访问

在使用相同的API时，我无法在两个不同的域上运行相同的Angular 5站点

此错误消息来自Chrome。Firefox中的错误是：

已阻止跨源请求：同一源策略不允许读取位于的远程资源。（原因：CORS标头“访问控制允许来源”与“”不匹配）

我在使用Angular应用程序的白色标签版本时注意到了这一点，该版本将在常规应用程序的替代URL上运行，但仍然使用在相同URL上运行的相同Laravel api。我已经为Laravel添加了适当的CORS配置，这似乎是一个浏览器问题-不知道如何解决它

例如，我在localhost上通过从localhost:4200更改为127.0.0.1:4200重新创建了它

奇怪的是，预飞行似乎成功地使用了正确的CORS头。

然而，在GET上，它似乎在响应上返回了错误的访问控制Allow Origin头。

这里值得注意的是，将API中允许的源代码更改为允许所有（“*”）并不能解决此问题

---

我不确定我还能提供什么其他信息或代码来让这一点更清楚。谢谢。

将此添加到您的

public/index.php

文件中

header('Access-Control-Allow-Origin: *');

---

您可以为angular webpack Development server提供的请求设置代理。通过使用代理，您可以将后端URL更改为源于angular domain托管URL。这将通过serve命令或package.json中的--proxy config实现。因此，angular将在具有相同后端服务的不同URL中运行

在package.json附近添加一个名为proxy.conf.json的文件。从您的请求中获取URL add/proxy

在proxy.conf文件中添加以下内容

{
  "/proxy": {
  "target": "http://localhost:3000",
  "secure": false,
  "pathRewrite": {
  "^/proxy": ""
 }
}

将你的发球命令更改为

ng serve--代理配置proxy.conf.json--端口4200--主机0.0.0.0

或

在angular.json中更改发球目标

"architect": {
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "your-application-name:build",
    "proxyConfig": "proxy.conf.json"
 },

注意：确保在Http服务URL和中的代理配置中添加/proxy仅用于开发目的

---

对于生产环境，您应该在web服务器中进行配置。

我认为您应该使用web.php进行此配置 在文件顶部，请使用此选项并重试

 <?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
  header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token");

Route::get('/login', 'Auth\LoginController@showLoginForm');

---

假设api在8080上运行，角度代码在4200上运行

在angular应用程序中创建一个名为proxy.conf.json的文件

{
“/api/”：{
“目标”：http://localhost:8080/",
“安全”：错误，
“changeOrigin”：正确
}
}

使用此命令启动angular应用程序

ng serve——端口4200——代理配置proxy.conf.json

使用此配置，当您调用localhost:4200/api时，它将调用8080，并且不会出现任何CORS错误
设置反向代理服务器并为这两个域配置路径。


这将允许您通过

让我们假设：

A->Angular应用程序（本地主机：4200）

B->您的其他域API（myapitest.local）

流程示例：

-浏览器请求（）->Nginx->A

-从后端加载数据->Nginx->B

因此，在Nginx的帮助下，您将能够从
和“B”也来自

由于原点相同，因此不会出现CORS错误。
问题在于名称映射。由于服务器池可能有多个IP地址，大多数浏览器将IP地址映射到一个名称。这通常通过请求的DNS名称完成。在你的情况下，没有名字，所以它看起来
在主机文件（Linux上为/etc/hosts或Windows上为C:\Windows\System32\Drivers\etc\hosts）中查找IP地址并从中返回名称

由于您需要跨域进行测试（充当两个单独的服务器），请在主机文件中添加一行，将myapitest.local指向127.0.0.2。以及一行myapitest2.local到127.0.0.3。这将允许您的本地命名与IP地址匹配，并且通过适当的配置（为每个服务器实例指定要绑定到的特定侦听地址），每个服务器实例都可以在端口80上运行

在所有跨来源请求和授权中使用名称

编辑

由于
访问控制允许凭据：true
，通配符不起作用

在dev-api.ourdomain.com服务器上：
在路由文件Routes/api.php中添加一个，该文件为已批准的域构建
访问控制允许来源：
头。您也可以将其作为中间件应用，但为了简单起见，我将使用简单的路由进行演示。飞行前航线也必须这样做

Route::get('/method/{id}', function (Request $request, $id) {
    $retval = method($id);
    $origin_allowed = $request->header('HTTP_ORIGIN');
    $allowed = array("dev.ourdomain.com", "dev.alternatedomain.com");
    if(in_array($origin_domain, $allowed))
        return ($retval)->header('Access-Control-Allow-Origin:',$origin_domain);
    else 
        return "Unauthorized";
});

这只是演示该概念的示例代码

确保在注销时清除HTTP授权和csrf令牌。
您可能已安装HTTPS Everywhere扩展。确保在Localhost上处处禁用HTTPS。这就是导致我出现此问题的原因。
然后，您必须设置确切的路径，以允许originI已经拥有Laravel API中指定的所有可接受的源代码。感谢您提供的代码片段，它可能会提供一些有限的、即时的帮助。一个恰当的解释将通过描述为什么这是一个很好的问题解决方案来极大地改进its，并将使它对未来有其他类似问题的读者更有用。请编辑您的答案，添加一些解释，包括您所做的假设。感谢@esakki的明显努力，但您能否帮助我理解：1）设置代理的目的是什么？以及2）如何在部署中配置？当您的请求从一个域到域或不同端口之外时，会发生CORS错误。从代理传递，您的后端API调用URL将被修改，以替换源自请求的域ex；[修改为[用于]