Question

CORS从CORS阻止CORS从原始位置对X处的XMLHttpRequest的访问：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态。

嗨，我正在努力解决CORS拒绝我的Vue组件与带有axios的外部API交互的问题，因为它会返回此错误。我尝试过使用Barryvdh的Cors标头支持以及制作中间件和自定义路由。它根本行不通。 Barryvdh回购中README.md中提到的所有内容均已完成，很遗憾，此问题无法通过任何必要的方法得到解决。

这是代码，尽管我认为不需要显示，因为它与回购中提到的完全相同；

在Kernel.php内部：

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

Barryvdh\Cors\ServiceProvider::class,

config / cors.php：

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

这是axios的get调用（我已将令牌替换为“令牌”）

    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');
            });
        }
    },

我已经作曲家转储了，解决问题没有任何影响。我做错了什么吗，这个问题有解决方案吗？预先感谢！

Answer 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');
    });

希望这会有所帮助，祝你好运！

CORS已从CORS政策阻止从X到X的XMLHttpRequest访问

1 个答案: