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

lavnFan 发布于2019-07-25 11:48 / 2821人阅读

摘要：用做后端开发单页应用，生成静态文件在下，页面在下。页面需要写成存在跨域问题，现用将端口代理到默认的端口解决。配置配置代理代理

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

...

...

存在跨域问题，现用 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.";
    }
}

云服务器 GPU云服务器 nginx服务器跨域跨域问题 webpack cdn配置跨域解决办法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/38617.html

Sanic ＋前端MVVM 一种新一代Python高性能全栈开发实践

摘要：前端一种新一代高性能全栈开发实践背景本项目将使用配合最简单的逻辑来展示一个基于的全新一代高性能全栈开发实践的为什么是对于为何不是等著名框架，或许可能很多人会产生疑惑，本身和非常的相似，而它的出现，不仅是大大改进过去时代性能低下通病，外加配 SanicCRUD-vue Sanic ＋前端MVVM 一种新一代Python高性能全栈开发实践showImg(https://segmentfa...

NusterCache 2019-08-20 17:22 评论0 收藏0
Sanic ＋前端MVVM 一种新一代Python高性能全栈开发实践

摘要：前端一种新一代高性能全栈开发实践背景本项目将使用配合最简单的逻辑来展示一个基于的全新一代高性能全栈开发实践的为什么是对于为何不是等著名框架，或许可能很多人会产生疑惑，本身和非常的相似，而它的出现，不仅是大大改进过去时代性能低下通病，外加配 SanicCRUD-vue Sanic ＋前端MVVM 一种新一代Python高性能全栈开发实践showImg(https://segmentfa...

Profeel 2019-07-25 12:00 评论0 收藏0
Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0