没有 'Access-Control-Allow-Origin.Origin 'null' 因此不允许访问。'请求的资源错误中存在标头

Posted 2023-03-04

【中文标题】没有 \'Access-Control-Allow-Origin.Origin \'null\' 因此不允许访问。\'请求的资源错误中存在标头

【英文标题】：No 'Access-Control-Allow-Origin.Origin 'null' is therefore not allowed access.' header is present on the requested resource error没有 'Access-Control-Allow-Origin.Origin 'null' 因此不允许访问。'请求的资源错误中存在标头

【发布时间】：2017-02-16 03:50:51

【问题描述】：

我正在尝试从angular 调用我的API（位于Laravel framework）。因此，它触发了错误“XMLHttpRequest 无法加载http://localhost:8000/inquiry。对预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'标头。来源'http://localhost'因此不允许访问。”

这是我的角码

var app = angular.module('inquiryForm', []);

app.controller('mainCtrl', function($scope, $http) 
    $scope.user = ;

    // calling our submit function.
    $scope.submitForm = function() 
     alert(JSON.stringify($scope.user));
     var data=JSON.stringify("sameer");
    // Posting data to php file
     $http(
       method  : 'POST',
       url     : 'http://**.**.**.**/inquiry',
       data    : $scope.user,
       headers : 'Content-Type': 'application/JSON'
     ).success(function(data) 
        alert(JSON.stringify(data));
     );
       
);

实际上，我正在调用 laravel 中的一条路由（考虑上面 url 中 ... 的 IP 地址）

我的 laravel 路线是： Route::post('inquiry', 'inquiryController@store');

这是我的控制器

classinquiryController 扩展了 Controller 公共功能存储（请求 $request） $data=$requst->all(); 返回响应（）->json（$数据）；

【问题讨论】：

你是如何运行你的应用程序的？

嗯，实际上我在 chrome 上运行它

不，您是在网络服务器中运行 index.html 还是直接在网络浏览器中打开它？

不，我正在从本地机器和数字海洋运行 index.html，但错误是一样的。在数字海洋上，有一个 nginx 网络服务器为我的内容提供服务。

请大家帮忙

【参考方案1】：

当您的 java 脚本代码尝试发送托管在另一个域或进程中的 http 请求时，通常会发生此错误。浏览器不允许跨域请求作为安全功能的一部分。因此，您必须在 Web 服务后端启用 CORS（跨域资源共享）。请查看以下链接并尝试一下。

https://github.com/barryvdh/laravel-cors

【讨论】：

您如何托管您的前端和后端应用程序？您可以在一个托管服务器中托管这两个应用程序吗？

是的，我的前端和后端在同一台服务器上，但我的前端运行在 80 端口上，而我的后端运行在 8080 端口上

是否可以在端口 80 上运行这两个应用程序？

我是java背景的程序员，也使用apache来托管php应用程序。我相信您正在提供 PHP 和纯 html 文件。您使用哪个服务器来托管或调试 php 应用程序？在您的 API 目录中添加相同的 html 和 js 文件并从那里访问它。我认为 apache 可以提供 php 脚本和 html 文件。

但问题是，我想将 api 与前端分开。所以这就是为什么我把它放在不同的端口上，因为我的 api 对 android app、ios app 和 webapp 很常见

【参考方案2】：

 app.controller('mainCtrl', function($scope, $http) 
    $scope.user = ;
    $scope.submitForm = function() 
        var settings = 
            "async": true,
            "crossDomain": true,
            "url": 'http://**.**.**.**/inquiry',
            "method": "POST",
            "headers": 
            "content-type": "application/x-www-form-urlencoded",
            ,
            "data": $.param($scope.user)  // angular may throw error bcz of $.param() method, then u have to use noConflict method and avoid $ symbol
                                          //Example: var jq = $.noConflict(); and use jq.param($scope.user)
        
        $http(settings).success(function(data) 
            console.log(data.data);
        );
    
);

or

app.controller('mainCtrl', function($scope, $http) 
    $scope.user = ;
    $scope.submitForm = function() 
        var settings = 
            "async": true,
            "crossDomain": true,
            "url": 'http://**.**.**.**/inquiry',
            "method": "POST",
            "headers": 
            "content-type": "application/x-www-form-urlencoded",
            ,
            "data": $.param($scope.user)  // angular may throw error bcz of  $.param() method, then u have to use noConflict method and avoid $ symbol
        
        /* http callback method*/
        $http(settings)then(function successCallback(data) 
                         console.log(data.data);
                    , function errorCallback(err)
                        console.log(err);
        );
    
);

现在应该可以了....

【讨论】：

我认为只有 POST 请求正确的问题，尝试进行 jquery AJAX 调用并检查它

我做了一件事，我添加了一个 chrome 扩展“cors”，当它启用时它运行成功。这个扩展在我的请求“Access-Control-Allow-Methods:POST, GET, OPTIONS, PUT, DELETE”和“Access-Control-Allow-Origin:*”中添加了两个标题，那么我如何使用角度控制器添加这个标题？

在发送到服务器webdeveasy.com/interceptors-in-angularjs-and-useful-examples之前使用角度拦截器概念修改您的请求和请求标头