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

前端之家收集整理的这篇文章主要介绍了create-react-app proxy仅适用于fetch api,但不适用于浏览器的简单获取前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用在端口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中创建此类设置?

仔细看看 create-react-app code显示这是设计的:

For single page apps,we generally want to fallback to /index.html.
However we also want to respect proxy for API calls.
So if proxy is specified,we need to decide which fallback to use.
We use a heuristic: if request accepts text/html,we pick /index.html.
Modern browsers include text/html into accept header when navigating.
However API calls like fetch() won’t generally accept text/html.
If this heuristic doesn’t work well for you,don’t use proxy.

在REST控制台扩展中运行http:// localhost:3000 / api / me的GET会返回正确的结果.

关于Fetch API and cookies的进一步阅读揭示我必须包括参数凭证:true以发送cookie:

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

猜你在找的React相关文章