Question

我在使用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>");
        }
    );
});

Answer 1

您需要使用网址https://openexchangerates.org/api/latest.json

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

因此，在您自己的服务器后端进行CORS配置并不重要。您遇到的问题仅仅是因为openexchangerates.org没有发回Access-Control-Allow-Origin响应标头。

但是如果您使用正确的URL - https://openexchangerates.org/api/latest.json - 那么该服务器将在其响应中发送回Access-Control-Allow-Origin标头，您将无法获得“CORS标头”访问权限 - 控制允许来源＆＃39;错过了错误消息。

CORS标题'Access-Control-Allow-Origin'缺少Laravel 5.4

1 个答案: