Flask + Nginx + React + Webpack 配置解决跨域问题

用 Flask 作后端开发单页应用，webpack-dev-server 生成静态文件在http://localhost:8080 下，Flask 页面在 http://localhost:5000 下。html 页面须要写成：

...
<script src="//localhost:8080/asserts/bundle.js"></script>
...

存在跨域问题，现用 nginx 将 8080、5000 端口代理到默认的 80 端口解决。看着也更优雅。

webpack 配置：

const url = "http://localhost:8080"

module.exports = {
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: `${url}/asserts/`,
    },
    devServer: {
        port: 8080,
        compress: true,
        hot: true,
        historyApiFallback: true,
        contentBase: path.join(__dirname, "dist"),
        publicPath: `${url}/asserts/`,
    }
    ...
}

nginx 配置

server {
    listen 80;
    server_name localhost; 
    location / {
        # flask 代理
        proxy_pass http://127.0.0.1:5000;
    }

    location /asserts/ {
        # webpack-dev-server 代理
        proxy_pass http://127.0.0.1:8080/asserts/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        error_page 502 @start-webpack-dev-server;
    }

    location @start-webpack-dev-server {
        default_type text/plain;
        return 502 "Please start the webpack-dev-server first.";
    }
}