create-react-app proxy仅适用于fetch api,但不适用于浏览器的简单获取

Question

我正在使用在端口3000设置上运行的非常小的create-react-app来代理对在端口8080上运行的后端服务器的请求.如果我放入浏览器地址栏,http://localhost:3000/api/me我会返回index.html页面但是如果我使用fetch API来得到/api/me它试图通过后端调用.

问题是我必须使用后端进行身份验证,后端将设置一个cookie,但由于我无法访问登录页面,http://localhost:3000/login因此无法获取cookie.

在我从create-react-app中弹出的另一个项目中,我有一个小文件来运行webpack-dev-server和配置

  proxy: {
    "*": "http://localhost:9191"
  }

即使放入浏览器地址栏,它也会发出代理请求.

是否可以在create-react-app中创建此类设置？

Answer 1

仔细研究create-react-app代码,可以看出这是设计的:

对于单页应用,我们通常希望回退到/index.html.但是,我们也希望尊重proxyAPI调用.因此,如果proxy指定,我们需要决定使用哪个回退.我们使用启发式:如果请求accepts text/html,我们选择/index.html.现代浏览器accept在导航时包括text/html到标题.但是,API调用fetch()通常不会接受text/html.如果这种启发式方法不适合您,请不要使用proxy.

运行http://localhost:3000/api/meREST Console内部扩展的GET会返回正确的结果.

关于Fetch API和cookie的进一步阅读揭示了我必须包含参数凭证:true来发送cookie:

fetch('/api/me', {
  credentials: 'include'
})