“Access-Control-Allow-Origin”标头的值“http://localhost:4200”不等于提供的来源

Question

（标题中错误消息的继续）“因此不允许访问 Origin 'http://127.0.0.1:4200'。”

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

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

跨域请求被阻止：同源策略不允许读取位于http://myapitest.local/v1/subscription/current/products 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”与“http://127.0.0.1:4200”不匹配）

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

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

奇怪的是，使用正确的 CORS 标头，预检似乎是成功的。

但是，在 GET 上，它似乎在响应中返回了 WRONG Access-Control-Allow-Origin 标头。

在此值得注意的是，将我在 API 中的 Allowed Origins 更改为允许所有 ('*') 并不能解决此问题。

我不确定我可以提供哪些其他信息或代码来更清楚地说明这一点。谢谢。

Answer 1

将此添加到您的 public/index.php 文件中

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

Answer 2

您可以为 Angular Webpack 开发服务器提供的请求设置代理。通过使用代理，您可以将后端 URL 更改为源自 Angular 域托管 URL。这将通过您的服务命令或 package.json 中的 --proxy-config 来实现。这样 Angular 将在具有相同后端服务的不同 URl 中运行。

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

在你的 proxy.conf 文件中添加这个

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

将你的服务命令更改为

ng serve --proxy-config proxy.conf.json --port 4200 --host 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 仅用于开发目的

对于生产环境你应该在 webservers 中配置。

Answer 3

我认为您使用 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');

Answer 4

假设您的 api 在 8080 上运行，而您的 Angular 代码在 4200 上运行。

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

{
    "/api/": {
        "target": "http://localhost:8080/",
        "secure": false,
        "changeOrigin": true
    }
}

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

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

使用此配置，当您调用 localhost:4200/api 时，它将调用 8080，并且不会出现任何 CORS 错误

Answer 5

设置反向代理服务器并为两个域配置路径。
Nginx Guide

这将允许您通过http://localhost/访问所有内容
让我们假设：
A -> Angular 应用程序 (localhost:4200)
B -> 你的其他域 API (myapitest.local)

示例流程：
- 浏览器请求(http://localhost/angular) -> Nginx -> A
- 从后端加载数据 -> Nginx -> B

因此，在 Nginx 的帮助下，您将能够从 http://localhost/ 访问“A” 和“B”也来自http://localhost/
由于来源相同，所以不会出现 CORS 错误。

Answer 6

问题出在名称映射中。由于一个服务器池可能有多个 IP 地址，因此大多数浏览器会将 IP 地址映射到一个名称。这通常通过请求的 DNS 名称完成。在你的情况下没有名字，所以它正在寻找 在主机文件（Linux 上的 /etc/hosts 或 Windows 上的 C:\Windows\System32\Drivers\etc\Hosts）中设置 IP 地址并从那里返回名称。

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

在所有跨域请求和授权中使用名称。

编辑

由于Access-Control-Allow-Credentials: true，通配符不起作用。

在 dev-api.ourdomain.com 服务器上： 将 Response Header 添加到路由文件 Routes/api.php 中，该文件为已批准的域构建 Access-Control-Allow-Origin: 标头。您也可以将其用作中间件，但为简单起见，我将使用简单的路由进行演示。预检路线也必须这样做。

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 令牌。

Answer 7

您可能已经安装了 HTTPS Everywhere 扩展。确保在 Localhost 上禁用 HTTPS Everywhere。这就是造成我这个问题的原因。