資訊專欄INFORMATION COLUMN
摘要：原文鏈接隨著前端越來越火，越來越多的人推崇前后端分離，后端只提供，前端只負(fù)責(zé)消費(fèi)。這樣我們就能更加專注自己的事情了，比如前端可以使用任何想要的工具等等，后端也不用因?yàn)榧汕岸说拇a而苦逼加班了。
原文鏈接
隨著前端越來越火，越來越多的人推崇前后端分離，后端只提供API，前端只負(fù)責(zé)消費(fèi)API。這樣我們就能更加專注自己的事情了，比如前端可以使用任何想要的工具（Webpack、Gulp等等），后端也不用因?yàn)榧汕岸说拇a而苦逼加班了。這里不討論前后端分離的必要性，更多可參考
淘寶前后端分離實(shí)踐
淘寶前后端分離系列文章
我們?yōu)槭裁匆獓L試前后端分離
這里主要分享前后端分離后，如何解決跨域問題
服務(wù)端 Rails作為一個(gè)Rails程序員，首先分享一下在Rails里面的解決方案, 大家可以使用一個(gè)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當(dāng)然，如果后端是NodeJs，我們也可以找到同樣的中間件 cors 請看以下配置
var express = require("express")
, cors = require("cors")
, app = express();
// 同樣的，只支持開發(fā)環(huán)境跨域
if(process.env.NODE_ENV == "development"){
app.use(cors());
}
Nginx
這時(shí)候，后端程序員可能會說，為了保持跟生產(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
這時(shí)候前端也不服了，說，我們自己能搞定
PS： 其實(shí)這里用了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://systransis.cn/yun/87829.html
摘要：就鹿晗宣布戀情導(dǎo)致微博宕機(jī)事件淺談大型網(wǎng)站高可用性架構(gòu)中午吃飯刷著刷著微博發(fā)現(xiàn)微博突然掛了。用戶在使用瀏覽器訪問一個(gè)網(wǎng)站時(shí)需要先通過協(xié)議向服務(wù)器發(fā)送請求，之后服務(wù)器返回文件與響應(yīng)信息。 webpack：從入門到真實(shí)項(xiàng)目配置 自從出現(xiàn)模塊化以后，大家可以將原本一坨代碼分離到個(gè)個(gè)模塊中，但是由此引發(fā)了一個(gè)問題。每個(gè) JS 文件都需要從服務(wù)器去拿，由此會導(dǎo)致加載速度變慢。Webpack 最主...
摘要：更新嘗試了一下實(shí)現(xiàn)前后端分離，新的文章如下前后端分離之初試更新可另外用實(shí)現(xiàn)前后端分離，這篇文章可能局限性太大，只是個(gè)人的入門實(shí)踐剛剛學(xué)習(xí)前端快一年，后臺方面了解甚少，于是決定踩踩坑，學(xué)習(xí)一下。 2018.9.6更新：嘗試了一下REST framework實(shí)現(xiàn)前后端分離，新的文章如下Django前后端分離之REST framework初試 2018.8.27更新：可另外用 restful...
摘要：盡量按照前端后端部署運(yùn)維來講，當(dāng)然中途涉及到跨域這種前后協(xié)調(diào)的還是無法避免捎帶一筆。關(guān)于我目前在寫從零構(gòu)建前后分離項(xiàng)目系列，修正和補(bǔ)充以此為準(zhǔn)不斷更新的項(xiàng)目實(shí)踐地址彩蛋提前預(yù)覽下一章傳送門 序： 開源的意義 本系列提前首發(fā)地址 背景 從事了近4年的互聯(lián)網(wǎng)行業(yè)，逐漸擔(dān)當(dāng)過團(tuán)隊(duì)的前端到后端的負(fù)責(zé)人，和大家一樣從小白逐漸的成長起來，回首望去幾年前的博客還是那么稚嫩。 回首這幾年： 從一個(gè)ja...
摘要：實(shí)現(xiàn)前后端分離的心得對目前的來說，前后端分離已經(jīng)變得越來越流行了，越來越多的企業(yè)網(wǎng)站都開始往這個(gè)方向靠攏。前后端工作分配不均。 實(shí)現(xiàn)前后端分離的心得 對目前的web來說，前后端分離已經(jīng)變得越來越流行了，越來越多的企業(yè)/網(wǎng)站都開始往這個(gè)方向靠攏。那么，為什么要選擇前后端分離呢？前后端分離對實(shí)際開發(fā)有什么好處呢? 為什么選擇前后端分離 在以前傳統(tǒng)的網(wǎng)站開發(fā)中，前端一般扮演的只是切圖的工作...
閱讀 2389·2021-09-22 15:27
閱讀 3209·2021-09-03 10:32
閱讀 3538·2021-09-01 11:38
閱讀 2523·2019-08-30 15:56
閱讀 2236·2019-08-30 13:01
閱讀 1560·2019-08-29 12:13
閱讀 1442·2019-08-26 13:33
閱讀 915·2019-08-26 13:30
