如何在简单的react应用程序中设置AJAX调用的代理？
如何在简单的react应用程序中设置AJAX调用的代理？
提问于 2018-01-03 17:50:19
如https://reactjs.org/docs/add-react-to-a-new-app.html所述，我创建了简单的react应用程序，现在我想对webserver (使用PHP)进行AJAX调用。为了使它与localhost:3000的开发服务器一起工作，我尝试在package.json中设置代理。
"proxy": {
"/abc": {
"target": "http://web.local/app/path/public/abc",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}不幸的是，应用程序使用默认的index.html内容回答。如何使代理在请求/abc路径时工作？
有任何方法来测试和调试代理吗？当我尝试打开http://localhost:3000/abc时，我可以看到
[HPM] POST /abc/abc -> http://web.local/app/path/public/abc在控制台里。但是当我加载应用程序时没有消息，请求是从应用程序发送的。(我尝试过fetch和axios调用。)
当我构建应用程序并在web服务器上运行它时，所有的功能都很好。
编辑:用于axios ajax调用的响应头：
HTTP/1.1 404 Not Found
X-Powered-By: Express
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 143
Vary: Accept-Encoding
Date: Wed, 03 Jan 2018 17:44:02 GMT
Connection: keep-alive用于提取
HTTP/1.1 301 Moved Permanently
X-Powered-By: Express
Content-Type: text/html; charset=UTF-8
Content-Length: 165
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Location: /abc/
Vary: Accept-Encoding
Date: Wed, 03 Jan 2018 17:58:37 GMT
Connection: keep-alive和
HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Content-Type: text/html; charset=UTF-8
ETag: W/"649-W8GnY7MkgPFg6/GXObpRHPnVDeU"
Vary: Accept-Encoding
Content-Encoding: gzip
Date: Wed, 03 Jan 2018 17:58:37 GMT
Connection: keep-alive
Transfer-Encoding: chunked回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-04 15:08:12
我解决了问题。我的php文件位于应用程序的public/ dir中(将它们包含在构建中)。并可作为静态内容从开发web服务器上访问。现在，代理检查公共/中是否存在文件，并在可能的情况下传递它。如果没有这样的文件，则应用规则并尝试从指定的URL中获取数据。
因此，我将所有php相关文件转移到其他位置，所需数据通过代理从web服务器传送，只需与
"proxy": "http://web.local/app/path/static"在package.json.
此外，我还必须添加单独的命令，将这个dir的内容复制到 build /，并将其添加到构建过程中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48082580
复制相关文章
相似问题
腾讯云开发者
