Django 是一个高级的 Python Web 框架,它鼓励快速开发和干净、实用的设计。Django 自带一个管理界面,可以用于管理网站的内容。React 是一个用于构建用户界面的 JavaScript 库,它允许开发者构建复杂的单页应用程序(SPA)。
问题:Django 后端和 React 前端部署在不同的域名或端口上时,浏览器会阻止跨域请求。
原因:浏览器的同源策略限制了不同源之间的请求。
解决方案:
django-cors-headers
库,并在 settings.py
中配置:# settings.py
INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
CORS_ORIGIN_ALLOW_ALL = True # 允许所有域名访问,生产环境中应指定具体域名
问题:Django 和 React 的路由可能会冲突。
原因:Django 和 React 都有自己的路由系统,需要正确配置以避免冲突。
解决方案:
# urls.py
from django.urls import path, include
urlpatterns = [
path('api/', include('myapp.urls')), # API 路由
path('', include('django.contrib.staticfiles.urls')), # 静态文件服务
]
// src/App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
export default App;
问题:React 应用程序的静态文件(如 HTML、CSS、JavaScript)需要正确服务。
原因:Django 默认不提供前端静态文件服务。
解决方案:
# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'frontend/build/static')]
urls.py
中添加静态文件路由:# urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
通过以上配置和解决方案,可以有效地解决 Django 和 React 应用程序同时提供服务时遇到的常见问题。
领取专属 10元无门槛券
手把手带您无忧上云