資訊專欄INFORMATION COLUMN
摘要：原文鏈接隨著前端越來越火，越來越多的人推崇前后端分離，后端只提供，前端只負責消費。這樣我們就能更加專注自己的事情了，比如前端可以使用任何想要的工具等等，后端也不用因為集成前端的代碼而苦逼加班了。
原文鏈接
隨著前端越來越火，越來越多的人推崇前后端分離，后端只提供API，前端只負責消費API。這樣我們就能更加專注自己的事情了，比如前端可以使用任何想要的工具（Webpack、Gulp等等），后端也不用因為集成前端的代碼而苦逼加班了。這里不討論前后端分離的必要性，更多可參考
淘寶前后端分離實踐
淘寶前后端分離系列文章
我們?yōu)槭裁匆獓L試前后端分離
這里主要分享前后端分離后，如何解決跨域問題
服務(wù)端 Rails作為一個Rails程序員，首先分享一下在Rails里面的解決方案, 大家可以使用一個rack-cors 中間件，并作以下配置:
#config/application.rb
config.middleware.insert_before 0, "Rack::Cors", :debug => true, :logger => (-> { Rails.logger }) do
allow do
origins ["http://localhost:3000"]
resource "*",
:headers => :any,
:methods => [:get, :post, :delete, :put, :options, :head],
:max_age => 0
end
end
更多配置請參考 rack-cors
Node當然，如果后端是NodeJs，我們也可以找到同樣的中間件 cors 請看以下配置
var express = require("express")
, cors = require("cors")
, app = express();
// 同樣的，只支持開發(fā)環(huán)境跨域
if(process.env.NODE_ENV == "development"){
app.use(cors());
}
Nginx
這時候，后端程序員可能會說，為了保持跟生產(chǎn)環(huán)境配置一直，請直接用 Nginx 來配置吧，這樣能減少差異。啪啦啪啦...
直接看配置吧
server {
listen 80;
# 配置可訪問域名，注意需要添加相應(yīng)host配置
server_name xxx.dev;
#charset koi8-r;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /api/v1 {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
# API Server
proxy_pass http://localhost:4000;
proxy_next_upstream error;
}
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
# Frontend Server
proxy_pass http://localhost:3000;
proxy_next_upstream error;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
http-proxy-middleware
這時候前端也不服了，說，我們自己能搞定
PS： 其實這里用了Nginx配置之后，webpack的hot reload會存在比較大的延遲，具體原因還沒研究
# 安裝插件
cnpm install --save-dev http-proxy-middleware
# 添加配置
import proxy from "http-proxy-middleware";
const apiProxy = proxy("/api/v1", {
target: "http://localhost:4000",
changeOrigin: true,
ws: true
});
browserSync({
server: {
baseDir: "src",
middleware: [
apiProxy,
...
]
}
})
更多參考
http-proxy-middelware
add http-proxy-middleware as api proxy
Chrome你也可以通過添加chrome插件來支持跨域
CORS Toggle
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/87829.html
摘要：就鹿晗宣布戀情導致微博宕機事件淺談大型網(wǎng)站高可用性架構(gòu)中午吃飯刷著刷著微博發(fā)現(xiàn)微博突然掛了。用戶在使用瀏覽器訪問一個網(wǎng)站時需要先通過協(xié)議向服務(wù)器發(fā)送請求，之后服務(wù)器返回文件與響應(yīng)信息。 webpack：從入門到真實項目配置 自從出現(xiàn)模塊化以后，大家可以將原本一坨代碼分離到個個模塊中，但是由此引發(fā)了一個問題。每個 JS 文件都需要從服務(wù)器去拿，由此會導致加載速度變慢。Webpack 最主...
摘要：更新嘗試了一下實現(xiàn)前后端分離，新的文章如下前后端分離之初試更新可另外用實現(xiàn)前后端分離，這篇文章可能局限性太大，只是個人的入門實踐剛剛學習前端快一年，后臺方面了解甚少，于是決定踩踩坑，學習一下。 2018.9.6更新：嘗試了一下REST framework實現(xiàn)前后端分離，新的文章如下Django前后端分離之REST framework初試 2018.8.27更新：可另外用 restful...
摘要：盡量按照前端后端部署運維來講，當然中途涉及到跨域這種前后協(xié)調(diào)的還是無法避免捎帶一筆。關(guān)于我目前在寫從零構(gòu)建前后分離項目系列，修正和補充以此為準不斷更新的項目實踐地址彩蛋提前預覽下一章傳送門 序： 開源的意義 本系列提前首發(fā)地址 背景 從事了近4年的互聯(lián)網(wǎng)行業(yè)，逐漸擔當過團隊的前端到后端的負責人，和大家一樣從小白逐漸的成長起來，回首望去幾年前的博客還是那么稚嫩。 回首這幾年： 從一個ja...
摘要：實現(xiàn)前后端分離的心得對目前的來說，前后端分離已經(jīng)變得越來越流行了，越來越多的企業(yè)網(wǎng)站都開始往這個方向靠攏。前后端工作分配不均。 實現(xiàn)前后端分離的心得 對目前的web來說，前后端分離已經(jīng)變得越來越流行了，越來越多的企業(yè)/網(wǎng)站都開始往這個方向靠攏。那么，為什么要選擇前后端分離呢？前后端分離對實際開發(fā)有什么好處呢? 為什么選擇前后端分離 在以前傳統(tǒng)的網(wǎng)站開發(fā)中，前端一般扮演的只是切圖的工作...
閱讀 2502·2021-09-22 15:27
閱讀 3270·2021-09-03 10:32
閱讀 3571·2021-09-01 11:38
閱讀 2551·2019-08-30 15:56
閱讀 2274·2019-08-30 13:01
閱讀 1588·2019-08-29 12:13
閱讀 1474·2019-08-26 13:33
閱讀 946·2019-08-26 13:30
