Vue.js与Laravel集成时CORS跨域问题无法解决

嘿，我刚碰到过几乎一模一样的情况，给你捋捋怎么解决～

问题根源 #

你用PHP调用API没问题，是因为PHP是在服务器端发起请求，不受浏览器的同源策略限制；但Vue.js的Axios是在用户的浏览器里发请求，浏览器会自动做预检（preflight）请求，而DarkSky的API服务器没有返回Access-Control-Allow-Origin头，所以浏览器直接拦截了这个请求，就出现了你看到的报错。

而且还有个隐藏风险：如果直接在前端代码里写DarkSky的密钥，任何人都能通过查看源码拿到你的密钥，这太不安全了！

最佳解决方案：用Laravel做请求代理 #

既然你已经在用Laravel，最稳妥的办法是让Laravel后端帮你转发请求——前端调用自己的Laravel接口，Laravel再去调用DarkSky的API，最后把结果返回给前端。这样既绕开了跨域问题，还能把API密钥藏在服务器端。

步骤1：添加Laravel路由

在routes/api.php里新增一个路由，用来处理前端的天气请求：

use App\Http\Controllers\WeatherController;

Route::get('/weather', [WeatherController::class, 'getForecast']);

步骤2：创建天气控制器

生成一个控制器来处理请求转发：

php artisan make:controller WeatherController

然后在app/Http/Controllers/WeatherController.php里写逻辑：

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Http;

class WeatherController extends Controller
{
    public function getForecast()
    {
        // 从前端请求里获取经纬度参数
        $latitude = request()->query('lat');
        $longitude = request()->query('lon');
        
        // 从.env文件读取API密钥（别硬编码！）
        $darkSkyKey = env('DARKSKY_API_KEY');

        // 用Laravel的HTTP客户端调用DarkSky API
        $response = Http::get("https://api.darksky.net/forecast/{$darkSkyKey}/{$latitude},{$longitude}");

        // 返回API响应给前端
        return $response->json();
    }
}

步骤3：配置API密钥

在你的.env文件里添加DarkSky的密钥：

DARKSKY_API_KEY=你的DarkSky密钥

步骤4：修改Vue的Axios请求

把前端直接调用DarkSky的代码改成调用自己的Laravel接口：

axios.get('/api/weather', {
    params: {
        lat: 37.8267,
        lon: -122.4233
    }
})
.then(response => {
    console.log('拿到天气数据啦:', response.data);
    // 这里处理你的业务逻辑
})
.catch(error => {
    console.error('请求出错:', error);
});

这样一来，前端请求的是自己域名下的接口，不会触发跨域限制，同时API密钥也安全地存在服务器端，完美解决问题～

内容的提问来源于stack exchange，提问作者Sir HC