Laravel 5.6 + Vue 2.5.7访问CoinMarketCap API遇CORS跨域问题求助

Hey there, let's work through this CORS error you're hitting when trying to call the CoinMarketCap API from your Laravel 5.6 + Vue 2.5.7 stack in Chrome. Here are a few practical solutions to fix this:

1. Use Laravel as a Reverse Proxy (Most Reliable Fix) #

Since the CoinMarketCap API isn't sending the Access-Control-Allow-Origin header for your http://tours.mine origin, the easiest way around this is to have Laravel act as a middleman to forward the request. Here's how:

• First, install Guzzle (Laravel 5.6 doesn't have the built-in HTTP client yet):

  composer require guzzlehttp/guzzle
  

• Add a route in routes/api.php (or web.php) to handle the proxy:

  Route::get('/proxy/coinmarketcap/listings', function () {
      $client = new \GuzzleHttp\Client();
      try {
          $response = $client->get('https://api.coinmarketcap.com/v2/listings/');
          return response($response->getBody(), $response->getStatusCode())
              ->header('Content-Type', $response->getHeaderLine('Content-Type'));
      } catch (\Exception $e) {
          return response()->json(['error' => $e->getMessage()], 500);
      }
  });
  

• Update your Vue code to call this Laravel proxy route instead of the direct CoinMarketCap URL:

  // Replace your original API call with this
  axios.get('/proxy/coinmarketcap/listings')
      .then(response => {
          // Handle your data here
          console.log(response.data);
      })
      .catch(error => {
          console.error(error);
      });
  

This way, your frontend is making a request to the same domain (http://tours.mine), so CORS rules don't apply.

2. Quick Check: Is the CoinMarketCap V2 API Still Active? #

A critical note: CoinMarketCap's v2 API has been deprecated for several years now. It's possible the endpoint is no longer fully functional, which could be contributing to unexpected CORS behavior. I'd recommend verifying if you should be using their current v3 API instead, which requires an API key for access. If you switch to v3, you'll need to include your API key in the proxy request headers like this:

$response = $client->get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', [
    'headers' => [
        'X-CMC_PRO_API_KEY' => 'your-api-key-here'
    ]
]);

3. CORS Middleware for Your Own Laravel APIs (Bonus) #

Just in case you ever need to handle CORS for your own Laravel API endpoints (not external APIs), here's how to set it up:

• Install the popular CORS package:

  composer require barryvdh/laravel-cors
  

• Register the service provider in config/app.php (add to the providers array):

  Barryvdh\Cors\ServiceProvider::class,
  

• Publish the config file:

  php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
  

• Open config/cors.php and whitelist your frontend origin:

  'allowed_origins' => ['http://tours.mine'],
  

• Add the middleware to your global stack in app/Http/Kernel.php:

  protected $middleware = [
      // ... other middleware
      \Barryvdh\Cors\HandleCors::class,
  ];
  

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