Question

我正在构建一个以create-react-app开头的React应用程序。在他们的文档中，他们描述了在开发过程中使用代理服务器进行API调用。当我向MAMP服务器请求php文件时，我想使用它。但是，请求并不会被代理到分配的服务器，而是仍然由webpack开发服务器为其服务。

create react app文档说要在package.json文件中添加一行以设置代理。我在其中放了“ proxy”：“ http://localhost”（MAMP服务器在端口80上运行）。我要提供的php文件位于index.html所在目录的“ api”文件夹中。

这是请求：

$.ajax({
     url: "/api/test.php"
     success: response=>{
     console.log(response);
     }
});

和test.php只是说：打印（“成功”）

但是控制台正在读取：

<?php
print("success")
?>

表示提供文件的是开发服务器，而不是apache服务器。我该如何解决？

Answer 1

从文档中

开发服务器将仅尝试将其Accept标头中没有text / html的请求发送到代理。

您可以检查devtools中的Network选项卡，并确保请求Accept标头与text/html不同。如果这是问题所在，link可以为您提供帮助。

Answer 2

您正在从本地主机向另一个域发出ajax请求。这被视为CORS要求。为了避免这种情况，您需要使用代理。由于代理是create react应用程序的一部分，因此您的浏览器假定它始终指向create-react-app，因此浏览器不知道代理存在。要解决此问题，请执行以下步骤：

在客户端目录中：

npm i http-proxy-middleware --save

在client / src中创建 setupProxy.js 文件。无需将其导入任何地方。 create-react-app将寻找该目录

将代理添加到此文件。

const proxy=require("http-proxy-middleware")
module.exports=function(app){
    app.use(proxy(['/api'],{target:"http://localhost:80"}))}

我们说的是做一个代理，如果有人尝试访问我们的反应服务器上的路由/ api，则将请求自动转发到localhost：80。