先後端分離後開發階段跨域問題處理

先後端分離以後，開發階段接口聯調就會出現ajax跨域問題。
固然，跨域問題的解決方案仍是挺多的，這裏梳理下我接觸到的幾種方案。

1、禁用Chrome的同源策略

目測這是最簡單粗暴的方案

能夠經過使用Chrome命令行啓動參數來改變Chrome瀏覽器的設置。
這裏使用的是disable-web-security參數，這個參數能夠下降Chrome瀏覽器的安全性，禁用同源策略。要支持跨域，還須要加上user-data-dir。

下面以Windows爲例。
1.先關閉全部的Chrome窗口。
2.新建一個Chrome快捷方式，右擊->屬性->快捷方式。
3.在目標(T)中設置參數：

--args --disable-web-security --user-data-dir

4.點擊應用/肯定，以這個快捷方式打開Chrome瀏覽器，效果以下：

2、webpack-dev-server代理

devServer: {
    ...
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8080',
            pathRewrite: {'^/api': '/api/v1'}
        }
    }
}

將 '/api' 經過本地開發服務器webpack-dev-server轉發到 'http://127.0.0.1:8080'，即轉發到後端服務。pathRewrite用於路徑轉換，具體取決於你請求的uri與後端服務實際uri的差別，好比你本地起的80端口，你的uri爲 'http://localhost/api'，將爲轉換成 'http://127.0.0.1:8080/api/v1'。
詳細配置請移步 webpack devServer。

3、nginx反向代理

http {
    ...
    server {
        ...
        location /api/ {
            proxy_pass http://127.0.0.1:8080
        }
    }
}

4、後端實現CORS接口

CORS須要瀏覽器和服務器同時支持。目前全部現代瀏覽器都支持該功能，IE瀏覽器不能低於IE10。
對於前端開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。

後端實現CORS接口只需合理設置Response Header，以node爲例：

const express = require('express');
let app = express();
app.all('*', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
    next();
});
...