首页 文章

'Access-Control-Allow-Origin'标头的值'http://localhost:4200'不等于提供的原点

提问于
浏览 次
11

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

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

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

跨源请求已阻止：同源策略禁止在http://myapitest.local/v1/subscription/current/products读取远程资源 . （原因：CORS Headers 'Access-Control-Allow-Origin'与'http://127.0.0.1:4200'不匹配）

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

我已经在localhost中重新创建了这个，例如从localhost：4200更改为127.0.0.1:4200 .

奇怪的是，使用正确的CORS标头，预检似乎是成功的 .
enter image description here

但是，在GET上，似乎在响应中返回错误的Access-Control-Allow-Origin标头 .

enter image description here

值得注意的是，在API中更改我的允许来源以允许所有（'*'）不能解决此问题 .

我不确定我能提供哪些其他信息或代码来使其更清晰 . 谢谢 .

angular laravel security cors

6 回答

  • 0

    假设您的api在8080上运行，而您的角度代码在4200上运行 .

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

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

    使用此命令启动angular app

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

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

    回复于
  • -1

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

    在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仅用于开发目的

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

    回复于
  • 0

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

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

    Example Flow:

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

    回复于
  • 4

    问题出在名称映射中 . 由于服务器池可能具有多个IP地址，因此大多数浏览器将IP地址映射到名称 . 这通常通过请求的DNS名称完成 . 在您的情况下，没有名称，因此它正在查找hosts文件中的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上运行 .

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

    Edit

    由于 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令牌 .

    回复于
  • -1

    将其添加到 public/index.php 文件中

    header('Access-Control-Allow-Origin: *');
    回复于
  • 0

    我认为你在文件顶部使用 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');
    回复于

相关问题