CORS 策略已阻止从源对 X 的 XMLHttpRequest 的 CORS 访问

Posted

技术标签:

【中文标题】CORS 策略已阻止从源对 X 的 XMLHttpRequest 的 CORS 访问【英文标题】:CORS Access to XMLHttpRequest at X from origin has been blocked by CORS policy 【发布时间】:2019-12-15 14:05:39 【问题描述】:

CORS 对 X 来源的 XMLHttpRequest 的访问已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:它没有 HTTP ok 状态。

您好,我正在努力解决 CORS 拒绝我的 Vue 组件与带有 axios 的外部 API 交互的问题,因为它返回此错误。我已经尝试过使用 Barryvdh 的 Cors 标头支持并制作中间件和自定义路由。它根本行不通。 Barryvdh 的 repo 中的 README.md 中提到的所有内容都已完成,不幸的是,这个问题不会以任何必要的方式得到解决。

这是代码,尽管我认为不需要显示,因为它与 repo 中提到的完全相同;

在 Kernel.php 内:

protected $middleware = [
    \Barryvdh\Cors\HandleCors::class,
inside app.php (providers array):

Barryvdh\Cors\ServiceProvider::class,

配置/cors.php:

'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
'exposedHeaders' => [],
'maxAge' => 0,

这是 axios get 调用(我已将我的令牌替换为 'TOKEN')

    methods: 
        loadWeatherData: function() 
            axios.get( 'http://api.openweathermap.org/data/2.5/weather?q=London&mode=json&units=metric&appid=TOKEN' )
                .then( function( response ) 
                    console.log( 'radi' );
            ).catch( errors => 
                console.log( errors+' ne radi');
            );
        
    ,

我已经作曲家转储,没有任何影响解决问题。 我做错了什么吗?这个问题有什么解决方案吗?提前致谢!

【问题讨论】:

您自己的应用程序上的 CORS 设置仅适用于传入请求。外部请求依赖于外部服务器的 CORS 设置。否则,它就不会成为一项安全功能。 Insomnia 从端点完美返回 json,所以我并没有从我的传出请求中看到问题。 我只是说,如果你发出一个外部请求,它与 Barrydvh 无关,所以你可以排除这种情况——除非你控制了两台服务器。 ...因此,发布一些更相关的代码可能对您更有用,例如您的 axios 请求。 我会在一分钟内更新问题。 【参考方案1】:

这里的问题似乎是 axios 喜欢发送自己的默认标头,而这些标头没有通过您的外部请求的预检。要解决此问题,您需要删除有问题的标头。

我能够重新创建您的错误,并使用以下代码绕过 CORS 问题。

let url = 'https://api.openweathermap.org/data/2.5/weather?q=London&mode=json&units=metric&appid=TOKEN';

// create a new instance so we don't delete the headers for other requests
let instance = axios.create();

// delete headers if existing
delete instance.defaults.headers.common['Accept'];
delete instance.defaults.headers.common['X-Requested-With'];
delete instance.defaults.headers.common['X-CSRF-TOKEN'];

// use the new axios instance to make your get request
instance.get(url)
    .then(function(response) 
        console.log(response);
    ).catch( errors => 
        console.log(errors + ' ne radi');
    );

希望这会有所帮助,祝你好运!

【讨论】:

【参考方案2】:

您可以添加到 TrustHosts.php 中间件而无需做任何额外的事情。从这里阅读更多信息https://***.com/a/70361284/2612926

【讨论】:

以上是关于CORS 策略已阻止从源对 X 的 XMLHttpRequest 的 CORS 访问的主要内容,如果未能解决你的问题,请参考以下文章

CORS 策略已阻止访问从源“http://localhost:3000”获取

CORS 策略已阻止从源“null”访问图像

CORS 策略已阻止从源 URL 访问 URL 的 XMLHttpRequest [重复]

CORS 策略已阻止从源访问“http://localhost...”处的 XMLHttpRequest:

CORS 策略已阻止从源“http://localhost:3001”访问“blahblahblah”获取

Javascript:CORS 策略已阻止从源“http ...”获取“https ..”的访问权限 [重复]