将应用程序部署到Heroku后无法调用API

时间:2017-04-29 13:18:36

标签: api reactjs heroku cors redux

我制作了一个天气应用程序,可以通过API调用freegeoip来查找当前位置的坐标,然后使用这些坐标连接到openweathermap API来获取当前位置的天气

在开发中,应用程序运行得非常好。但是在部署到Heroku之后,我似乎得到了看起来像CORS错误的东西?

控制台日志:

<?php
require_once('Facebook/autoload.php');
# /js-login.php
$fb = new Facebook\Facebook([
'app_id' => '{app-id}',
'app_secret' => '{app-secret}',
'default_graph_version' => 'v2.9',
]);

$helper = $fb->getJavaScriptHelper();


try {
    $accessToken = $helper->getAccessToken();
} catch(Facebook\Exceptions\FacebookResponseException $e) {
    // When Graph returns an error
    echo 'Graph returned an error: ' . $e->getMessage();
    exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
    // When validation fails or other local issues
    echo 'Facebook SDK returned an error: ' . $e->getMessage();
    exit;
}


if (!isset($accessToken)) {
    echo 'No cookie set or no OAuth data could be obtained from cookie.';
    exit;
}



// The OAuth 2.0 client handler helps us manage access tokens
$oAuth2Client = $fb->getOAuth2Client();

// Get the access token metadata from /debug_token
$tokenMetadata = $oAuth2Client->debugToken($accessToken);


// Validation (these will throw FacebookSDKException's when they fail)
$tokenMetadata->validateAppId('{app-id}'); // Replace {app-id} with your app id
// If you know the user ID this access token belongs to, you can validate it here
//$tokenMetadata->validateUserId('123');
$tokenMetadata->validateExpiration();

if (! $accessToken->isLongLived()) {
  // Exchanges a short-lived access token for a long-lived one
  try {
    $accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);
  } catch (Facebook\Exceptions\FacebookSDKException $e) {
    echo "<p>Error getting long-lived access token: " . $helper->getMessage() . "</p>\n\n";
    exit;
  }

  echo '<h3>Long-lived</h3>';
  var_dump($accessToken->getValue());
}

$_SESSION['fb_access_token'] = (string) $accessToken;

try {
  // Returns a `Facebook\FacebookResponse` object
  $response = $fb->get('/me?fields=id,name,email', $accessToken->getValue());
} catch(Facebook\Exceptions\FacebookResponseException $e) {
  echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
  echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}

$user = $response->getGraphUser();

echo 'Name: ' . $user['name'];
echo 'Email: ' . $user['email'];

?>

链接到Heroku app

修改

更改为Mixed Content: The page at 'https://weather-react-drhectapus.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://freegeoip.net/json/'. This request has been blocked; the content must be served over HTTPS. 似乎适用于freegeoip API(https),但不适用于openweathermap API。这是我得到的完整控制台日志:

https://freegeoip.net/json/

2 个答案:

答案 0 :(得分:2)

只需更改API端点即可使用https而不是http

https://freegeoip.net/json/效果很好;)

<强>更新
您更新的问题还包含一个请求。遗憾的是,api.openweathermap.org无法通过HTTPS使用。因此,您需要在您的控制下通过代理与其联系,并将响应转发给您的客户。有关详细信息,请参阅this answer

答案 1 :(得分:0)

如果您应用此中间件,它应该开始正常工作

  app.use(function (req, res, next) {
    if (req.headers['x-forwarded-proto'] === 'https') {
      res.redirect('http://' + req.hostname + req.url);
    } else {
      next();
    }
  });