如何解决在ThinkPHP和Vue之间实现跨域

跨域是由于浏览器同源策略导致的问题，当客户端尝试从一个域名下发出请求到另一个不同的域名时，就可能遇到跨域请求阻止的情况。在前后端分离的架构中，像Vue这样的前端框架很可能会运行在不同的端口或者域名，而ThinkPHP作为后端框架运行在另一端口或域名，因此需要配置跨域访问。

这里是如何在ThinkPHP和Vue之间实现跨域的步骤：

在ThinkPHP中设置跨域：

1. 修改响应头：

   打开位于ThinkPHP项目的全局中间件或者在需要跨域的Controller里面设置。你可以通过设置header来添加跨域的允许：

// 设置跨域允许的来源，这里设置为'*'是允许所有来源
header("Access-Control-Allow-Origin: *");
// 设置允许的跨域请求方法
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// 设置请求头中可以包括哪些字段
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

2. 使用中间件：

   为了不每个Controller都重复写这些代码，可以创建一个中间件来处理跨域。

namespace apphttpmiddleware;
class Cors {
    public function handle($request, Closure $next) {
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization');
        if (request()->isOptions()) {
            return response('');
        }
        return $next($request);
    }
}

3. 注册中间件：

   将上边创建的中间件注册到全局中间件列表middleware.php中。

return [
    // 其他全局中间件...
    apphttpmiddlewareCors::class,
];

在Vue中配置代理以处理跨域：

在开发环境中，Vue通常提供了代理服务来处理跨域问题。Vue CLI提供的vue.config.js可以配置这个代理服务。

1. 创建或修改vue.config.js 文件在Vue项目的根目录下：

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:xxxx', // 后端服务器地址和端口
        changeOrigin: true,
        secure: false, // 如果是https接口，需要配置这个参数为true
        pathRewrite: {
          '^/api': '' // 这里理解成用'/api'代替target里面的地址，后面组件中我们调用接口时直接用api代替 比如我要调用'http://localhost:xxxx/user/add'，直接写'/api/user/add'即可
        }
      },
    }
  }
}

proxy部分的含义是说，当你在Vue应用中发起到/api路径的请求时，这个请求将被代理到http://localhost:xxxx这个后端服务器地址。changeOrigin为true意味着会自动更新请求的headers中的Host值为目标服务器的值。

2. 使用axios时配置基础路径：

如果你使用axios来发起请求，可以设置基础路径，使得每次请求都会自动加上/api前缀：

js
import axios from 'axios';
const baseURL = process.env.NODE_ENV === 'production' 
  ? 'http://production-endpoint'
  : '/api';
const instance = axios.create({
  baseURL
});

这样配置之后，你在本地开发时，所有到/api的请求都会自动被代理到远程的后端服务上，而在生产模式下，会使用设定的生产服务端点。

注意：在生产环境中，你可能需要在服务器上进行配置（如Nginx反向代理）以处理跨域，并且你通常不需要Vue的代理。这些配置在实际部署时的服务器设置中完成。

通过在ThinkPHP后端设置跨域头，在Vue前端设置代理服务器，可以解决开发时的跨域问题。在生产环境中，通常由网站服务器的相关配置来处理跨域和请求代理。