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
– Sundance.101, Commented Apr 3, 2018 at 19:47
This answer has a thorough explanation google.co.uk/url?sa=t&source=web&rct=j&url=https://… — Sundance.101
– Sundance.101, Commented Apr 3, 2018 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
– dingo_d, Commented Apr 3, 2018 at 20:02

dingo_d · Accepted Answer · 2018-04-03 20:11:15Z

2

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 :)

answered Apr 3, 2018 at 20:11

dingo_d

11.9k12 gold badges83 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related