1. 什么是跨域？
跨域是指在浏览器中，当前网页向其他域名的服务器发送请求时，如果该请求的目标域名与当前域名不同，就会产生跨域问题。这是由于浏览器的同源策略导致的，同源策略要求请求的域名、端口和协议必须相同。
然而，在实际开发中，经常会遇到需要进行跨域访问的情况，例如前端使用Vue框架搭建的应用需要与后端使用ThinkPHP框架构建的API进行通信。本文将介绍如何在ThinkPHP和Vue之间实现跨域。
2. ThinkPHP中的跨域设置
ThinkPHP框架自带了跨域设置的功能，可以通过修改配置文件来实现跨域访问。
2.1 修改配置文件
打开ThinkPHP框架中的config目录下的config.php文件，找到以下配置项：
$config = [
// ...
/* 其他配置项 */
// +----------------------------------------------------------------------
// | 跨域设置
// +----------------------------------------------------------------------
'cross_domain' => [
'enable' => true, // 是否允许跨域
'allow_origin' => '*', // 允许的跨域域名
'allow_methods' => 'GET,POST,PUT,DELETE' // 允许的请求方法
],
/* 更多配置项 */
];
将'enable'的值设置为true，表示允许跨域访问。'allow_origin'设置为'*'，表示允许任何域名进行跨域访问。'allow_methods'设置为需要允许的请求方法，例如GET、POST等。
2.2 配置响应头
在ThinkPHP框架中，可以通过新增中间件来配置响应头，进一步实现跨域。
在中间件目录下创建一个Cors.php文件，并写入以下代码：
namespace app\middleware;
class Cors
{
public function handle($request, \Closure $next)
{
$response = $next($request);
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
return $response;
}
}
然后在config目录下的middleware.php文件中，将Cors中间件添加到全局中间件中：
'middleware' => [
// ...
\app\middleware\Cors::class
]
3. Vue中的跨域配置
在Vue中，我们可以使用axios库来发送请求，并通过配置来实现跨域。
3.1 安装axios
首先，确保在Vue项目中已安装axios。如果没有安装，可以使用以下命令进行安装：
npm install axios3.2 配置跨域
在Vue项目的根目录下，找到vue.config.js文件（如果没有该文件，则自行创建），并添加以下代码：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080', // 修改为ThinkPHP的API访问地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
以上配置表示，所有路径为/api开头的请求都会被代理到http://localhost:8080，即ThinkPHP的API访问地址。changeOrigin设置为true，表示开启跨域。pathRewrite进行路径重写，将请求路径中的/api前缀去除。
现在，前端可以通过发送请求来与后端的ThinkPHP API进行跨域通信了。
4. 测试跨域访问
下面我们以一个简单的示例来测试跨域访问是否成功。
在前端Vue项目中的某个页面编写以下代码：
axios.get('/api/user')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
这段代码会向后端的ThinkPHP API发送一个GET请求，请求路径为/api/user。
在ThinkPHP项目的控制器中编写以下代码：
public function user()
{
return json(['name' => 'John Doe', 'age' => 25]);
}
这段代码会返回一个json格式的响应，包含姓名和年龄信息。
启动前端Vue项目和ThinkPHP项目后，在浏览器的控制台中可以看到输出了后端返回的响应信息，表示跨域访问成功。
5. 总结
本文介绍了在ThinkPHP和Vue之间实现跨域访问的方法。通过修改ThinkPHP的配置文件和头部设置，以及在Vue中进行代理配置，可以轻松实现跨域通信。跨域访问在实际开发中非常常见，了解和掌握这种解决方案对于前后端开发人员都是非常有必要的。