【请求报错】Allowing credentials for wildcard origins is insecure. Please specify more restrictive origins or set ‘credentials’ to false in your CORS configuration.。

• 2020 年 10 月 19 日
• 筆記
• http请求问题

在使用vue+axios时请求接口时遇到报错：Allowing credentials for wildcard origins is insecure. Please specify more restrictive origins or set ‘credentials’ to false in your CORS configuration。

使用postman调用该接口并未出现错误

查看vue.config.js中devServer无误后，确认问题不是来自前端

比较正常接口（下图左）和异常接口（下图右）发现response Headers有关于跨域请求的部分配置不一样

解决方案：后端开发在接口的response Headers中设置跨域

'corsFilter' => [
    'class' => Cors::class,
    'cors'  => [
        'Origin'=> ['//localhost:8080'],
        'Access-Control-Request-Method' => ['*'],
        'Access-Control-Request-Headers' => ['*'],
        'Access-Control-Allow-Credentials' => true,
        'Access-Control-Max-Age' => 3600,
        'Access-Control-Expose-Headers' => ['Content-Type, Content-Length, Authorization, Accept, X-Requested-With'],
    ]
]

上边配置的解释

• Origin 即 Access-Control-Allow-Origin 表示 响应头指定了该响应的资源是否被允许与给定的origin共享。
• Access-Control-Request-Method 用于通知服务器在真正的请求中会采用哪种 HTTP 方法。因为预检请求所使用的方法总是 OPTIONS ，与实际请求所使用的方法不一样，所以这个请求头是必要的。
• Access-Control-Request-Headers 用于通知服务器在真正的请求中会采用哪些请求头。
• Access-Control-Allow-Credentials 表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。
• Access-Control-Max-Age 表示返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存多久。
• Access-Control-Expose-Headers 列出了哪些首部可以作为响应的一部分暴露给外部。

注意

如果设置 Origin 为 ['*']，即所有的前端跨域请求可以接受，同时把 Access-Control-Allow-Credentials 设置为 true，Yii 会直接报错：Allowing credentials for wildcard origins is insecure. Please specify more restrictive origins or set ‘credentials’ to false in your CORS configuration.。

告诉你使用通配符的凭证是不安全的，让你设置更严格的 Origin或者把 Access-Control-Allow-Credentials 设置为 false。