Use PHP script as a 'server' for react app?

Question

Since I have access to the shared hosting, which doesn't have node installed, I cannot use express as a server (or any of the fancy node stuff xD).

Now, the reason why I need a server is basically because when I fetch data from Behance API from my app I'm get a CORS error.

So the idea is to have a server.php which fetches the details from the Behance API

<?php

$endpoint = ( isset( $_GET['project'] ) ) ? "projects/{$_GET['project']}" : 'projects';

$api_key = '**************';
$url     = "https://behance.net/v2/users/myuser/{$endpoint}?api_key={$api_key}";

$contents = file_get_contents( $url );

echo $contents;

I've tested this locally, and I get the correct JSON back (opening localhost/server.php - I'm on mac and have php 7.1 set up locally).

Now what I'm interested in is: how to use this in my React app?

Do I just then do a fetch() towards https://mysite/server.php and that's it?

I tried by setting the fetch url to http://localhost/server.php but I still get the CORS error

Failed to load http://localhost/server.php?project=: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My guess is the port part is the fault.

The fetching part looks like:

const fetchData = async (endpoint, method, headers, body) => {
  const options = {};

  options.method = method;
  options.headers = headers || {};

  if (typeof body !== 'undefined') {
    options.body = JSON.stringify(body);
  }

  const url = `http://localhost/server.php?project=${endpoint}`;

  return fetch(url, options).then((response) => response.json());
};

export function getItems() {
  const headers = {
    Accept: 'application/json;charset=utf-8',
    'Content-Type': 'application/json;charset=utf-8',
  };

  return fetchData('', 'GET', headers);
}

export function getItem(id) {
  const headers = {
    Accept: 'application/json;charset=utf-8',
    'Content-Type': 'application/json;charset=utf-8',
  };

  return fetchData(id, 'GET', headers);
}

How do I make this work locally?

Hi dingo_d. I think you need to add domain as allowed in .htaccess or in httpd.conf (I think that's the file). Google cross origin apache and you'll find a few answers. — Sundance.101, Apr 03 '18 at 19:47
This answer has a thorough explanation https://www.google.co.uk/url?sa=t&source=web&rct=j&url=https://stackoverflow.com/questions/18642828/origin-http-localhost3000-is-not-allowed-by-access-control-allow-origin&ved=2ahUKEwil2uuG8Z7aAhULa1AKHfAbCfEQjjgwAHoECAkQAQ&usg=AOvVaw0nhcPWPDjXXq0p8Ecpp5Sq — Sundance.101, Apr 03 '18 at 19:55
Hmmm, didn't think of adding `header( 'Access-Control-Allow-Origin: *' );` in my php. I am getting `Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.` error now, but the header tip helped, cheers! — dingo_d, Apr 03 '18 at 20:02

score 2 · Answer 1 · answered Apr 03 '18 at 20:11

So the answer, at least for local development is adding header() to the script

<?php

header( 'Access-Control-Allow-Origin: *' );
header( 'Access-Control-Allow-Headers: Content-Type' );

$endpoint = ( isset( $_GET['project'] ) ) ? "projects/{$_GET['project']}" : 'projects';

$api_key = '**************';
$url     = "https://behance.net/v2/users/myuser/{$endpoint}?api_key={$api_key}";

$contents = file_get_contents( $url );

echo $contents;

I'd need to polish it a bit more, but this does the trick :)

Use PHP script as a 'server' for react app?

1 Answers1