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

Question

（标题中错误消息的继续）“因此不允许访问源'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中的“允许的起源”更改为允许所有（'*'）不能解决此问题。

我不确定我可以提供什么其他信息或代码来使这一点更加清楚。谢谢。

Answer 1

让我们假设您的api在8080上运行，而您的角度代码在4200上运行。

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

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

使用此命令启动角度应用

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

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

Answer 2

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

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

在您的proxy.conf文件中添加此

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

将您的serve命令更改为

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

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

Answer 3

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

这将使您可以通过http://localhost/访问所有内容
假设：
A-> Angular App（localhost：4200）
B->您的其他域API（myapitest.local）

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

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

Answer 4

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

由于您需要跨域进行测试（充当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 5

您可能已经安装了HTTPS Everywhere扩展。确保在本地主机上的所有位置禁用HTTPS。那就是造成我这个问题的原因。

Answer 6

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

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

Answer 7

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