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

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

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

用 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...

Profeel 2019-07-25 12:00 评论0 收藏0
Sanic ＋前端MVVM 一种新一代Python高性能全栈开发实践

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

NusterCache 2019-08-20 17:22 评论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
前端性能优化不完全手册

摘要：负载均衡就是用来帮助我们将众多的客户端请求合理的分配到各个服务器，以达到服务端资源的充分利用和更少的请求时间。如下面的配置复制代码这样可以完美绕过浏览器的同源策略访问的属于同源访问，而对服务端转发的请求不会触发浏览器的同源策略。性能优化是一门大学问，本文仅对个人一些积累知识的阐述，欢迎下面补充。抛出一个问题，从输入url地址栏到所有内容显示到界面上做了哪些事？ 1.浏览器向 DN...

ranwu 2019-08-23 16:52 评论0 收藏0