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

**URL:** <https://www.shiqidu.com/t/topic/665>\
**Category:** 开发调优\
**Tags:** Yii\
**Created:** [2019 年10 月 24 日 09:23 UTC](https://www.shiqidu.com/t/topic/665 "2019-10-24T09:23:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![Eureka](https://www.shiqidu.com/user_avatar/www.shiqidu.com/eureka/32/5_2.png) [@Eureka](https://www.shiqidu.com/u/Eureka)\
发布日期： [2019 年10 月 24 日 09:23 UTC](https://www.shiqidu.com/t/topic/665/1 "2019-10-24T09:23:21Z")

</div>

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

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

```php
'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'],
	]
]

```

上边配置的解释

- `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`。

也就是说不能 `Access-Control-Allow-Credentials` 为 `true` 并且 `Access-Control-Allow-Origin` 为 `*`。

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

具体原因可以看[这里](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials)。

> 更多关于[HTTP访问控制 （CORS）](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)的知识