create-react-app 代理请求到 php 后端
create-react-app proxy requests to php backend
我是 运行 流明 (5.3) API 通过 $ php -S localhost:8888 -t public
当我通过邮递员到达任何端点时它都可以正常工作。但是,例如,当我尝试卷曲 localhost:8888/v1/auth/login 时,出现以下错误:
curl: (7) Failed to connect to localhost port 8888: Connection refused
在问这个问题之前我做了一些探索,一些用户说我可能需要为我的一些路由启用 CORS。所以我继续安装 https://github.com/barryvdh/laravel-cors#lumen 并将其应用于所有路线。
但是,我仍然无法从我的终端访问任何端点 window。
最终目标
最终,目标是将来自 React 应用程序的请求代理到 lumen 后端,但我一直收到连接被拒绝的请求。
Proxy error: Could not proxy request /v1/auth/login from localhost:3000 to http://localhost:8888/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
会不会是我在lumen中错误配置了handle CORS中间件?
更新
我设法让我的 React 应用程序通过在请求中注入完整路径来向我的 lumen API 发出请求。例如,路径现在是 http://localhost:8888/v1/auth/login
,而不是 /v1/auth/login
。我设法通过在我的提取中添加 mode: 'no-cors'
来让它工作:
function login(userData, onError, cb) {
return fetch('http://localhost:8888/v1/auth/login', {
mode: 'no-cors',
method: 'post',
body: JSON.stringify(userData),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus)
.then(parseJSON)
.then(cb)
.catch(onError);
}
无模式:no-cors
理想情况下,我只想 return fetch('/v1/auth/login', {
并在没有模式的情况下代理请求:no-cors 但这似乎不起作用。知道为什么吗?
此外,curl 的问题仍然存在。
事实证明,用 $ php -S localhost:8888 -t public
启动我的 php 后端是导致问题首当其冲的原因。在深入研究 create-react-app 问题后,我发现一位用户在 php 后端 (https://github.com/facebookincubator/create-react-app/issues/800) 中遇到了类似的问题。
解决方案是像这样启动服务器:$ php -S 0.0.0.0:8888 -t public
这将允许 create-react-app 正确地将请求代理到 php 服务器。这也让我 curl localhost:8888
此外,我需要在我的 php.ini 文件中取消注释 always_populate_raw_post_data = -1
每个 ()
我的设置如下:
package.json
{
"name": "client",
"version": "0.4.2",
"private": true,
"devDependencies": {
"enzyme": "^2.6.0",
"react-addons-test-utils": "^15.4.1",
"react-scripts": "0.7.0"
},
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router-dom": "^4.2.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8888/"
}
从客户端获取
function login(userData, onError, cb) {
return fetch('/v1/auth/login', { // <-- this works correctly now
method: 'post',
body: JSON.stringify(userData),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus)
.then(parseJSON)
.then(cb)
.catch(onError);
}
希望这对遇到类似问题的其他人有所帮助。
我是 运行 流明 (5.3) API 通过 $ php -S localhost:8888 -t public
当我通过邮递员到达任何端点时它都可以正常工作。但是,例如,当我尝试卷曲 localhost:8888/v1/auth/login 时,出现以下错误:
curl: (7) Failed to connect to localhost port 8888: Connection refused
在问这个问题之前我做了一些探索,一些用户说我可能需要为我的一些路由启用 CORS。所以我继续安装 https://github.com/barryvdh/laravel-cors#lumen 并将其应用于所有路线。
但是,我仍然无法从我的终端访问任何端点 window。
最终目标
最终,目标是将来自 React 应用程序的请求代理到 lumen 后端,但我一直收到连接被拒绝的请求。
Proxy error: Could not proxy request /v1/auth/login from localhost:3000 to http://localhost:8888/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
会不会是我在lumen中错误配置了handle CORS中间件?
更新
我设法让我的 React 应用程序通过在请求中注入完整路径来向我的 lumen API 发出请求。例如,路径现在是 http://localhost:8888/v1/auth/login
,而不是 /v1/auth/login
。我设法通过在我的提取中添加 mode: 'no-cors'
来让它工作:
function login(userData, onError, cb) {
return fetch('http://localhost:8888/v1/auth/login', {
mode: 'no-cors',
method: 'post',
body: JSON.stringify(userData),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus)
.then(parseJSON)
.then(cb)
.catch(onError);
}
无模式:no-cors
理想情况下,我只想 return fetch('/v1/auth/login', {
并在没有模式的情况下代理请求:no-cors 但这似乎不起作用。知道为什么吗?
此外,curl 的问题仍然存在。
事实证明,用 $ php -S localhost:8888 -t public
启动我的 php 后端是导致问题首当其冲的原因。在深入研究 create-react-app 问题后,我发现一位用户在 php 后端 (https://github.com/facebookincubator/create-react-app/issues/800) 中遇到了类似的问题。
解决方案是像这样启动服务器:$ php -S 0.0.0.0:8888 -t public
这将允许 create-react-app 正确地将请求代理到 php 服务器。这也让我 curl localhost:8888
此外,我需要在我的 php.ini 文件中取消注释 always_populate_raw_post_data = -1
每个 ()
我的设置如下:
package.json
{
"name": "client",
"version": "0.4.2",
"private": true,
"devDependencies": {
"enzyme": "^2.6.0",
"react-addons-test-utils": "^15.4.1",
"react-scripts": "0.7.0"
},
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router-dom": "^4.2.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8888/"
}
从客户端获取
function login(userData, onError, cb) {
return fetch('/v1/auth/login', { // <-- this works correctly now
method: 'post',
body: JSON.stringify(userData),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus)
.then(parseJSON)
.then(cb)
.catch(onError);
}
希望这对遇到类似问题的其他人有所帮助。