解决 Yii2 + Vue 前后台分离时跨域的问题

10-24 17:23 字数 1360 阅读 103 已编辑

为了解决前端发送 ajax 请求跨域的问题,需要如下的配置。

在控制器的 behaviors 方法中增加下面的代码

'corsFilter' => [
    'class' => Cors::class,
    'cors'  => [
        'Origin'=> ['http://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'],
    ]
]

上边配置的解释

  • OriginAccess-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-MethodsAccess-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

也就是说不能 Access-Control-Allow-Credentialstrue 并且 Access-Control-Allow-Origin*

因为 Access-Control-Allow-Credentials 的意思就是允许跨域请求在请求头中携带凭证,比如 cookie,做身份识别,但是你又把 Access-Control-Allow-Origin 设置为 *,这是说不通的,是相悖的。

具体原因可以看这里

更多关于HTTP访问控制 (CORS)的知识

0人点赞>
关注 收藏 改进 举报
0 条评论
排序方式 时间 投票
快来抢占一楼吧
请登录后发表评论