CORS 在共享主机上正常工作，但在 localhost 中不能正常工作

Posted 2023-03-04

【中文标题】CORS 在共享主机上正常工作，但在 localhost 中不能正常工作

【英文标题】：CORS work correctly on sharing host but not in localhost

【发布时间】：2017-12-12 22:45:48

【问题描述】：

我尝试使用 Laravel（作为后端）和 angularjs（作为前端）构建一个简单的 api 基础应用程序。 一开始，我遇到了这个错误：

XMLHttpRequest 无法加载 http://127.0.0.1:8000/api/myroute。回复 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。 Origin 'http://localhost' 因此不允许访问。

http://127.0.0.1:8000/api/myroute 是我获取一些数据的路径，在 Laravel 中定义为 POST 路径。

那是我以这种方式在我的路由上添加了 CORS 中间件（根据this sample）： Cors 中间件：

public function handle($request, Closure $next)
    
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token');
    

下面的代码是我在 Angularjs 中发送请求的 $http 代码：

$http(
    method: 'POST',
    url: 'http://127.0.0.1:8000/api/myroute',
    headers: 
        'Content-Type': 'application/json'
    
).then(function (response) 
    console.log(response);
, function (reject) 
    console.log(reject);
);

我应该补充一点，当我在主机上上传我的项目时，这个 Cors 工作正常！ 我的问题只是http://localhost。

我也在 Firefox 中尝试过，但结果是一样的，只是 Firefox 没有显示跨域错误，这是唯一的区别。

这段时间我无法在主机上开发我的项目，我需要在本地工作。 所以我需要帮助！

【问题讨论】：

奇怪的是，您看到的是带有环回 ip 的 url，但原始的是本地主机。你试过`url:'localhost:8000/api/myroute',`吗？

我在本地开发（我在 Windows 上）时使用的另一种解决方法是将 FQDN 添加到我的主机文件中。该行将如下所示 dev.somesite.local 127.0.0.1 然后我可以使用 `url: 'dev.somesite.local/api/myroute'

感谢您的 cmets，关于第一，是的！我都试过了，没有区别。关于第二条评论，我也这样做了，但它与 localhost 或 127.0.0.1

相同

你能加载127.0.0.1:8000/api/myroute。在网络浏览器中？当你使用没有 AJAX 的 PostMan 或 CURL 时会发生什么。您可以验证响应中的 cors 标头吗？

【参考方案1】：

尝试将以下代码作为标题添加到您的 laravel 的 index.php 文件中：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization');

但要小心跨域！