先後端分離實踐 — 如何解決跨域問題

原文連接

隨着前端愈來愈火，愈來愈多的人推崇先後端分離，後端只提供API，前端只負責消費API。這樣咱們就能更加專一本身的事情了，好比前端可使用任何想要的工具（Webpack、Gulp等等），後端也不用由於集成前端的代碼而苦逼加班了。這裏不討論先後端分離的必要性，更多可參考

• 淘寶先後端分離實踐

• 淘寶先後端分離系列文章

• 咱們爲何要嘗試先後端分離

這裏主要分享先後端分離後，如何解決跨域問題

服務端

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();

// 一樣的，只支持開發環境跨域
if(process.env.NODE_ENV == 'development'){
    app.use(cors());
}

Nginx

這時候，後端程序員可能會說，爲了保持跟生產環境配置一直，請直接用 Nginx 來配置吧，這樣能減小差別。啪啦啪啦...
直接看配置吧

server {
    listen       80;
    # 配置可訪問域名，注意須要添加相應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