Django / React - 生产 API URL 路由问题

Question

我有一个后端 Django REST API，它也有助于为我的 React 前端提供服务。我目前在我的 API 请求 URL 路径到生产中的 Django API 时遇到问题，除了我的主页之外的每个页面......

有效的 API URL：

我能够访问我的主页，在我的主页中，我有一个对我的 API 的 GET 请求，它运行良好并按预期加载数据。这是我网站唯一有效的 GET 请求，因为 API URL 路径对我的urlpatterns 语法是正确的。

不起作用的 API URL：

当我访问我的 React 应用主页以外的页面时会出现问题。根据我的网络面板，我在其他页面上对 Django 的 API 请求使用了错误的 URL 路径（他们也以 index.html 响应），这让我相信我设置了我的 django URL 错误。

请在下面查看我的配置：

主 urls.py:

def render_react(request):
    return render(request, "index.html") #<---- index.html from React

    
urlpatterns = [
   path('auth/', include('drf_social_oauth2.urls', namespace='drf')),
   path('admin/', admin.site.urls),
   path('api/', include('bucket_api.urls', namespace='bucket_api')),
   path('api/user/', include('users.urls', namespace='users')),
   path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

urlpatterns += [
   re_path('',render_react)  #<---- Serving React index.html
]

这是一个问题示例：

当我访问这个子页面网址时：

https://mywebsite.com/try-demo/ra4r7n7mdb 

一个 GET 请求也应该触发这个 URL：

https://mywebsite.com/api/demo/ra4r7n7mdb 

但是，它不是将请求发送到上面的正确 URL，而是发送到这个 url：

https://mywebsite.com/try-demo/api/demo/ra4r7n7mdb 

对于从我的 django api 请求数据的网站的其他部分来说，这也是同样的问题。因此，当我访问我的登录页面 (https://mywebsite.com/login) 并输入我的详细信息以请求身份验证令牌时。令牌的请求应该是：

https://mywebsite.com/auth/token/ 

但它通过以下方式请求数据：

https://mywebsite.com/login/auth/token/ 

如何解决这个问题？

我的 url 模式有一个捕获所有请求，然后我的反应能够处理 404 个不存在的页面。我唯一的问题是我的 React 应用程序如何在生产中向我的 API 请求数据。 （我主页上的 API 请求再次正常工作）为什么我的其他请求会附加我的 React 路由器 URL 的第一个 URL 路径？

我不想用代码阻塞这篇文章，所以请让我知道我应该在此处提供哪些其他信息来帮助解决这个问题？

---

更新

我已经解决了我的服务器的 API 请求问题。根据网络面板，路径现在是正确的。但是，问题仍然存在，我似乎只将我的 index.html 作为这些 API 请求的响应（它们应该是数据响应，而不是 index.html）

这是我为 Django 捕获的所有正则表达式

   re_path(".*/", render_react),
   re_path(r"^$", render_react) 

新编辑

我现在可以让我的 API 数据请求之一以 JSON 数据进行响应（正如预期的那样） 这是有效的 API 请求的 URL：

https://mywebiste.com/api/demo/idoyem1l4k/

这些仍然不起作用：

https://mywebsite.com/api/demo/tabledata/idoyem1l4k

https://mywebsite.com/api/demo/graphdata/idoyem1l4k

我如何提出请求：

import axios from 'axios';

const baseURL = `https://mywebsite.com/api`;

const axiosInstance = axios.create({
    baseURL: baseURL,
    timeout: 9000,
    headers: {
        Authorization: 'Bearer ' + localStorage.getItem('access_token'),
        'Content-Type': 'application/json',
        accept: 'application/json',
    },
});

export const getData = async (dispatch, slug, cancelToken) =>
{
  try
  {
    console.log('fired demo request')
    const response = await axiosInstance.get("demo/graphdata/" + slug, { cancelToken });
    dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
  } catch (err)
  {
    if ('isCancel' in err && err.isCancel())
    {
      return;
    }

    dispatch({ type: 'FETCH_ERROR' });
  }
}

如何返回请求的实际数据而不是我的索引？

Answer 1

这是有道理的，它总是返回 index.html。您的 catch all 正则表达式会阻止调用您的 API 调用，因此它始终解析为 render_react。我认为你有 3 个选择。

1. 您尝试将包罗万象的模式放在所有 urlpatterns 的底部 - 不过我不确定这有多可靠
2. 删除re_path(".*/", render_react), 并明确命名要使用的每个反应页面并不能全部了解
3. 您更改包罗万象的正则表达式以使用 re_path("(?!api).*/", render_react), 之类的内容排除您的 Django 应用程序

我会选择选项 2，因为它可以让您最大程度地控制您的网址