CORS 标头“Access-Control-Allow-Origin”缺少 Laravel 5.4

Posted 2023-03-04

【中文标题】CORS 标头“Access-Control-Allow-Origin”缺少 Laravel 5.4

【英文标题】：CORS header ‘Access-Control-Allow-Origin’ missing Laravel 5.4

【发布时间】：2018-02-08 22:53:56

【问题描述】：

我对使用 javascript 的 CORS 有疑问。

跨域请求被阻止：同源策略不允许读取 http://openexchangerates.org/latest.json 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

为了解决这个问题，我安装了laravel-cors 包

但这根本没有帮助。有人可以建议我如何解决这个问题吗？我如何调试它以查看问题出在哪里以及为什么这个包不起作用？

这是我的代码。

在\Http\Kernel.php

protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \Barryvdh\Cors\HandleCors::class,
    ];

在\config\app.php

'providers' => [
       Barryvdh\Cors\ServiceProvider::class,
 ],

在\config\cors.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Laravel CORS
    |--------------------------------------------------------------------------
    |
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
    | to accept any value.
    |
    */

    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,

];

结束我的 js：

$(document).ready(function()
    fx.base = "EUR";
    fx.settings = 
        from : "EUR"
    ;

    var amount = 9.99; //in SolidShops, you could use:  product.price 
    // Load exchange rates data via the cross-domain/AJAX proxy:

    $.getJSON(
        'http://openexchangerates.org/latest.json',
        function(data) 
            // Check money.js has finished loading:
            if ( typeof fx !== "undefined" && fx.rates ) 
                fx.rates = data.rates;
                fx.base = data.base;
             else 
                // If not, apply to fxSetup global:
                var fxSetup = 
                    rates : data.rates,
                    base : data.base
                
            

            // now that we have exchange rates, add a few to our page
            var USD = fx.convert(amount, to: "USD"); //13.22784197768393
            var GBP = fx.convert(amount, to: "GBP"); //8.567532636985659
            var JPY = fx.convert(amount, to: "JPY"); //1028.1670562349989

            // we can now use the accounting.js library to format the numbers properly
            USD = accounting.formatMoney(USD, "$ ", 2, ",", ".");
            GBP = accounting.formatMoney(GBP, "£ ", 2, ",", ".");
            JPY = accounting.formatMoney(JPY, "¥ ", 2, ",", ".");

            $("ul.currencies").append("<li>USD estimate: " + USD + "</li>");
            $("ul.currencies").append("<li>GBP estimate: " + GBP + "</li>");
            $("ul.currencies").append("<li>JPY estimate: " + JPY + "</li>");
        
    );
);

【问题讨论】：

我在 Laravel 上工作已经有一段时间了，但你可以参考像 github.com/francescomalatesta/laravel-api-boilerplate-jwt 这样的包来了解你做错了什么

@JackSlayer94 这是一个全新的项目，我怎么理解？

【参考方案1】：

您需要改用 URL https://openexchangerates.org/api/latest.json

---

问题中引用的错误消息表明，当您的代码向 URL http://openexchangerates.org/latest.json 发出请求时，openexchangerates.org 服务器没有将 Access-Control-Allow-Origin 响应标头发送回您的代码。

因此，您在自己的服务器后端执行什么 CORS 配置并不重要，您自己的代码是从该后端提供的。您遇到的问题只是因为 openexchangerates.org 没有发回 Access-Control-Allow-Origin 响应标头。

但是，如果您改为使用正确的 URL —https://openexchangerates.org/api/latest.json — 那么该服务器将在其响应中发回 Access-Control-Allow-Origin 标头，而您将不会收到 “CORS 标头 'Access-Control-Allow -Origin'missing” 错误消息不再出现。

【讨论】：

谢谢，我是新手。我在一个过时的教程中得到这个代码。