Flask + Nginx + React + Webpack 配置解決跨域問題

lavnFan 發布于2019-07-25 11:48 / 2880人閱讀

摘要：用做后端開發單頁應用，生成靜態文件在下，頁面在下。頁面需要寫成存在跨域問題，現用將端口代理到默認的端口解決。配置配置代理代理

用 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配置跨域解決辦法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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