将 Create-React-App 与 Apache VirtualHost 一起使用答案

【问题标题】：Using Create-React-App with Apache VirtualHost将 Create-React-App 与 Apache VirtualHost 一起使用
【发布时间】：2021-01-30 17:47:57
【问题描述】：

我正在尝试为一家公司开发一个项目。这家公司的 API 只允许来自两个来源的请求：他们自己的主机和xyz.localhost。

起初，我只使用 jQuery 开发项目（通过 CDN 加载）。使用 Apache VirtualHost 设置，这很有效——我可以访问 API。

现在，我想重构项目并使用 React。我用create-react-app创建了一个react目录。

问题是：我可以让 create-react-app 使用 xyz.localhost，但我仍然在 Chrome 中收到 CORS 错误消息：

Access to fetch at 'http://api.thatcompany.com/search?search=a' 
from origin 'http://xyz.localhost:3000' has been blocked by CORS policy

有没有人知道如何让它工作？提前谢谢你。

/private/etc/apache2/httpd.conf：

# Virtual hosts
#Include /private/etc/apache2/extra/httpd-vhosts.conf
Include /private/etc/apache2/vhosts/*.conf

/private/etc/hosts:

127.0.0.1       xyz.localhost
255.255.255.255 broadcasthost
::1             xyz.localhost

/private/etc/apache2/vhosts/xyz.localhost.conf：

<VirtualHost *:80>
        DocumentRoot "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public"
        ServerName xyz.localhost

        <Directory "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public">
                AllowOverride All
                Require all granted
        </Directory>

        <filesMatch "\.(html|htm|js|css)$">
                FileETag None
                <ifModule mod_headers.c>
                        Header unset ETag
                        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
                        Header set Pragma "no-cache"
                        Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
                </ifModule>
        </filesMatch>
</VirtualHost>

我的 create-react-app 启动脚本：

"scripts": { "start": "HOST=xyz.localhost react-scripts start" }

【问题讨论】：

你在运行npm start的时候，有没有报错？您的应用是否使用 api http://api.thatcompany.com/search?search=a？

标签： reactjs apache localhost create-react-app virtualhost

【解决方案1】：

我找到了解决方法。

我只是将 VirtualHost 指向 Create React App 的构建文件夹，这很有效并为我提供了静态文件。

编辑代码非常烦人，因为每次更新后我都必须运行npm run Build。

幸运的是，我找到了npm watch 模块。这样，create react App 将在每次保存时重建。在保存和刷新浏览器之间我仍然需要等待一秒钟，这绝对不能与单独使用 create react app 相提并论，但它已经足够好的解决方案了！

【讨论】：