React公用文件夹中的PHP文件(在localhost上测试)

Question

目前我正在处理一个React文件夹，其中包含一些公共文件夹中的PHP。

结构

.
├── pubic
│   ├── api
│        └── co.php
├── _src
│   ├── api
│   └── components
│   └── index.tsx
├── package.json
└── node_modules

公用文件夹包含PHP文件，用于更改对客户端/API服务器的请求/响应(由diff公司制作(。

我在公用文件夹中添加了另一个endpoint/PHP文件，但在localhost上测试时似乎无法访问它。我的同事提到，我需要更新暂存服务器中的更改，以测试PHP文件夹中的更改。

有没有更好的方法在本地测试，这样我就不必每次在添加PHP文件的公共文件夹中进行更改时都更新服务器了？

/src/api/co/reg/index.ts

import { TRequestConfig, TRequestParams } from '../..';
export { CoRes } from './CoRes.class';
export const coRequestConfig: TRequestConfig = {
endpoint: '/tempo/api/co.php',
method: 'POST',
useMock: false,
mockFunc: params => {
return {
ok: true,
body: '{}',
};
},
params2request: (params): TRequestParams => {
return {
body: params ? params.body : {},
};
},
};

/public/api/co.php

<?php
$ch = curl_init();
$isDev = $_SERVER['SERVER_NAME'] === 'stg.cooo.ca' || $_SERVER['SERVER_NAME'] === 'lol.ca';
$protocol = $isDev ? 'https://cooo.com' : 'https://cooo.prod.com';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$url = "${protocol}/aa/api/co/used";
$data = file_get_contents('php://input');
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
} else {
$couponId = $_GET['couponId'];  
$url = "${protocol}/aa/api/co/${couponId}";
curl_setopt($ch, CURLOPT_URL, $url);
}
if ($isDev) {
curl_setopt($ch, CURLOPT_USERPWD, "1234:1122"); 
}
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
echo  $result;

Answer 1

我经常在自己的项目中这样做，我有一个破解的解决方案

要运行PHP，服务器端的解析器或编译器(WAMP/LAMP/XAMPP/ETC(需要首先处理PHP文件，然后将数据发送到客户端。由于react是基于节点的，因此它无法以本机方式处理PHP文件。

我自己的解决方案使用WAMP，并将虚拟主机(httpd vhosts.conf(绑定到我的react项目的公用文件夹。

示例：

<VirtualHost *:80>
ServerName api.projectname.test
ServerAlias www.api.projectname.test
DocumentRoot "path/to/public/folder"
<Directory  "path/to/public/folder/">
Options +Indexes +Includes +FollowSymLinks +MultiViews
Header set Access-Control-Allow-Origin "*"
AllowOverride All
Require local
</Directory>
</VirtualHost>

接下来，我配置主机文件(c:\Windows\System32\Drivers\etc\hosts(要将此URL重定向回localhost，请在该文件中添加以下两行(可以在底部，但请确保这是一行新行，而不是带有"#"注释符号的行。

127.0.0.1 api.projectname.test
::1 api.projectname.test

最后，我启动WAMP并进行react，在react中，我使用一个条件if在开发或生产之间切换，以切换URL

if_dev() ? 'http://api.projectname.test/api' : '/api'

然后设置完成。请注意，在将文件上传到服务器的情况下，这可能无法完全工作，因为后端也在开发期间的同一服务器目录上，任何上传都会导致由于公共文件夹发生更改而重新呈现的react脚本，但除此之外，您现在可以很容易地使用它来实现代码的标准PHP后端，同时前端和后端都在同一目录中(如果将两者都保存到git等中，则很方便(