[英]Proxying in development using Create React App
I'm building a React application that I started with create-react-app.我正在构建一个使用 create-react-app 开始的 React 应用程序。 In their documentation, they describe using a proxy server for API calls during development.
在他们的文档中,他们描述了在开发过程中使用代理服务器进行 API 调用。 I want to use this for when I make requests to my MAMP server for php files.
我想在向 MAMP 服务器请求 php 文件时使用它。 However, the requests aren't being proxied to the assigned, it's still the webpack dev server serving it.
然而,请求并没有被代理到分配的,它仍然是服务它的 webpack 开发服务器。
The create react app documentation says to put a line into the package.json file to set up the proxy. create react app 文档说要在 package.json 文件中添加一行来设置代理。 I've put "proxy": " http://localhost " in it (the MAMP server is running on port 80).
我已经将“代理”:“ http://localhost ”放入其中(MAMP 服务器在端口 80 上运行)。 The php file I'm trying to serve is in an "api" folder in the same directory as index.html
我尝试提供的 php 文件位于与 index.html 相同目录中的“api”文件夹中
here's the request:这是请求:
$.ajax({
url: "/api/test.php"
success: response=>{
console.log(response);
}
});
and test.php simply says: print("success")和 test.php 只是说:打印(“成功”)
But the console is reading:但是控制台正在读取:
<?php
print("success")
?>
which means it's the dev server, not the apache server that's serving the file.这意味着它是开发服务器,而不是为文件提供服务的 apache 服务器。 How can I fix this?
我怎样才能解决这个问题?
From the docs:从文档:
The development server will only attempt to send requests without text/html in its Accept header to the proxy.
开发服务器只会尝试将其 Accept 标头中没有 text/html 的请求发送到代理。
https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
Can you check the Network tab in the devtools and make sure the request Accept header is different from text/html
.您能否检查 devtools 中的 Network 选项卡,并确保请求 Accept 标头与
text/html
不同。 In case that is the problem this link could help you.如果这是问题,此链接可以帮助您。
You are making an ajax request from your localhost to a different domain.您正在从本地主机向其他域发出 ajax 请求。 this is counted as CORS request.
这算作 CORS 请求。 to circumvent this you need to use proxy.
要避免这种情况,您需要使用代理。 since proxy is the part of the create react app, your browser assumes it is always pointed to the create-react-app, browser does not know that proxy is there.
由于代理是 create react 应用程序的一部分,您的浏览器假定它始终指向 create-react-app,浏览器不知道代理在那里。 to solve the issue follow those steps:
要解决此问题,请按照以下步骤操作:
In the client side directory:在客户端目录中:
npm i http-proxy-middleware --save
Create setupProxy.js file in client/src.在 client/src 中创建setupProxy.js文件。 No need to import this anywhere.
无需在任何地方导入它。 create-react-app will look for this directory
create-react-app 会寻找这个目录
Add your proxies to this file.将您的代理添加到此文件。
const proxy=require("http-proxy-middleware")
module.exports=function(app){
app.use(proxy(['/api'],{target:"http://localhost:80"}))}
We are saying that make a proxy and if anyone tries to visit the route /api on our react server, automatically forward the request on to localhost:80.我们是说创建一个代理,如果有人试图访问我们的反应服务器上的路由 /api,自动将请求转发到 localhost:80。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.