Question

所以我一直在研究一个将请求发送到Django REST-API的React项目。问题是，我似乎无法解决CORS的问题。前端完全与后端隔离。为了确保网站正常运行，我需要让Django提供前端文件。我不知道从哪里开始，如何设置Django + React环境以便我不必处理CORS问题？

Answer 1

我处理它的方式（以及用DJANGO编写的后端）是我的反应应用程序使用NodeJ进行服务器端呈现和转发api请求。这允许我将节点服务器上的请求转发到django服务器。

看看这个nodejs - 表达服务器实现：

import path from 'path'
import express from 'express'
import compression from 'compression'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { match, RouterContext } from 'react-router'
import configureStore from 'data/redux/store';
import proxy from 'http-proxy-middleware';
import { Provider } from 'react-redux';
import { IntlProvider } from 'react-intl';
import routes from './routes';

const store = configureStore();
const app = express();
app.use(compression());

//template engine
app.set('view engine', 'ejs');
//where to look for templates
app.set('views', path.join(__dirname, '/public'));
//Serve static files
app.use(express.static(path.join(__dirname, '/public'), { index: false }));

//middleware for handling api request
app.use('/api/*', proxy({
    target: process.env.API_HOST,
    pathRewrite: { '^/api/': '' },
    changeOrigin: true,
    secure: false,
}));

app.use('/media/*', proxy({
    target: process.env.API_HOST,
    changeOrigin: true,
    secure: false,
}));

app.get('*', (req, res) => {
    match({ routes: routes(store), location: req.url }, (err, redirect, props) => {
        if (err) {
            res.status(500).send(err.message)
        } else if (redirect) {
            res.redirect(redirect.pathname + redirect.search)
        } else if (props) {
            const appHtml = renderToString(
                <Provider store={store}>
                    <IntlProvider locale="en">
                        <RouterContext store={store} {...props} />
                    </IntlProvider>
                </Provider>
            );
            res.render('index', { appHtml });
        } else {
            res.status(404).send('Not Found')
        }
    })
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, function () {
    console.log('Production Express server running at localhost:' + PORT)
});

所以我有NodeJS服务器服务器响应应用程序并处理以/api/开头的传入请求，方法是将它们转发到django服务器并返回给客户端的响应。

Answer 2

我可以通过将django与反应松散耦合来做到这一点。像这样工作：我在应用程序内部的文件夹中启动了一个新的npm项目webpack我需要反应前端（my_app / react_frontend）。所以我在这个文件夹上构建了我的反应前端，里面有一个index.html（公共的）。这个index.html成为我在主url（render（index.html））上的views.py中创建的一个索引视图的模板文件。接下来，您需要一个django中间件来处理webpack。我在这里使用这个小型库：https://github.com/ezhome/django-webpack-loader。您必须在settings.py和webpack.config.js中仔细配置文件夹，遵循此库的文档，例如在模板设置中包含react_frontend文件夹。

最后，我与django dev服务器一起在watch模式下运行我的webpack dev-server进行开发。这是，我在packages.json中的启动脚本是"start": "./node_modules/.bin/webpack --config webpack.config.js --watch"

这样，我的反应前端仅在index.html上与django耦合。对后端的所有ajax调用都直接指向DRF视图。我不必这样处理CORS问题。 CSFR问题是直截了当的，因为我只需要在index.html文件上放置{％csrf_token％}。我希望这有帮助。

如何设置Django和React项目而不必处理CORS？

2 个答案: