悠悠楠杉
网站页面
Nginx+ThinkPHP+Vue：构建无障碍的跨域通信
07/05
一、Nginx 配置跨域
Nginx 作为 Web 服务器，其强大的配置能力在解决跨域问题上尤为关键。通过添加相应的 proxy_set_header 和 add_header 指令，可以轻松实现跨域请求的转发和响应头设置。
nginx
server {
listen 80;
server_name mydomain.com;
location /api/ {
proxy_pass http://thinkphp_server; # ThinkPHP 服务地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
add_header 'Access-Control-Allow-Origin' '*'; # 允许所有域名访问
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 允许的方法
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # 允许的头部信息
}
}
这段配置中，proxy_pass 指向 ThinkPHP 服务器的地址，而 add_header 则用于设置响应头以允许跨域请求。* 表示允许所有域名访问，实际生产中应根据需要指定具体的域名以增强安全性。
二、ThinkPHP 配置跨域中间件
ThinkPHP 框架提供了灵活的中间件机制来处理跨域问题。你可以创建一个中间件，在用户进入具体控制器之前处理 CORS 相关的头部信息。
php
// 文件路径：application/middleware/Cors.php
namespace app\middleware;
use Closure;
use think\Response;
class Cors
{
public function handle($request, Closure $next)
{
// 设置 CORS 相关头部信息，允许所有域名和所有方法等，实际开发中需适当调整以增强安全性。
Response::setCors([
'origin' => '*', // 允许所有来源的跨域请求
'methods' => 'GET, POST, OPTIONS', // 允许的方法类型，OPTIONS 方法用于预检请求处理跨域时使用。
'headers' => 'Content-Type, Authorization', // 允许的自定义头部信息。
'expose' => [], // 对开发者不可见的头部信息列表（默认不暴露任何头部）
'max_age' => 3600, // 预检请求的缓存时间（秒）
'credentials' => true // 是否允许发送 Cookie 等身份信息。
]);
return $next($request); // 继续执行后续处理。
}
}
然后在应用的全局中间件配置中注册此中间件。这样，每当有请求进入 ThinkPHP 应用时，Cors 中间件就会先于其他中间件执行，为响应设置正确的 CORS 头部。
php // application/middleware.php 中添加：\app\middleware\Cors::class, ### 三、Vue 前端处理跨域请求 在 Vue 前端项目中，使用 Axios 作为 HTTP 客户端来发送请求时，同样需要处理 CORS 问题。由于后端已经设置了 CORS 相关头部信息，前端主要需要确保请求正确配置了 Access-Control-Request-Method 和 Access-Control-Request-Headers 等头部。通常不需要额外配置，只需确保使用正确的 HTTP 方法（如 GET、POST）和携带正确的请求头即可。但为了进一步增强前端的安全性和健壮性，可以设置一个全局的 Axios 实例来统一管理请求配置：javascript // src/utils/http.js import axios from 'axios'; const http = axios.create({ baseURL: 'http://mydomain.com/api/', timeout: 10000 }); http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 设置请求头 export default http; 在 Vue 组件中使用这个全局 Axios 实例来发送请求：javascript // src/components/MyComponent.vue import http from '@/utils/http'; export default { methods: { fetchData() { http.get('/some/endpoint') .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); } } } ``` 通过上述步骤，我们利用 Nginx 的反向代理功能、ThinkPHP 的中间件机制以及 Vue 前端的 Axios 配置，共同解决了跨域访问的问题。这不仅增强了应用的安全性，还提高了前后端数据交互的效率与灵活性。
