前后端分離后開發(fā)階段跨域問(wèn)題處理

FrozenMap 發(fā)布于2019-07-25 14:05 / 550人閱讀

摘要：前后端分離之后，開發(fā)階段接口聯(lián)調(diào)就會(huì)出現(xiàn)跨域問(wèn)題。當(dāng)然，跨域問(wèn)題的解決方案還是挺多的，這里梳理下我接觸到的幾種方案。對(duì)于前端開發(fā)者來(lái)說(shuō)，通信與同源的通信沒(méi)有差別，代碼完全一樣。后端實(shí)現(xiàn)接口只需合理設(shè)置，以為例

前后端分離之后，開發(fā)階段接口聯(lián)調(diào)就會(huì)出現(xiàn)ajax跨域問(wèn)題。
當(dāng)然，跨域問(wèn)題的解決方案還是挺多的，這里梳理下我接觸到的幾種方案。

一、禁用Chrome的同源策略

目測(cè)這是最簡(jiǎn)單粗暴的方案

可以通過(guò)使用Chrome命令行啟動(dòng)參數(shù)來(lái)改變Chrome瀏覽器的設(shè)置。
這里使用的是disable-web-security參數(shù)，這個(gè)參數(shù)可以降低Chrome瀏覽器的安全性，禁用同源策略。要支持跨域，還需要加上user-data-dir。

下面以Windows為例。
1.先關(guān)閉所有的Chrome窗口。
2.新建一個(gè)Chrome快捷方式，右擊->屬性->快捷方式。
3.在目標(biāo)(T)中設(shè)置參數(shù)：

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

4.點(diǎn)擊應(yīng)用/確定，以這個(gè)快捷方式打開Chrome瀏覽器，效果如下：

二、webpack-dev-server代理

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

將 "/api" 通過(guò)本地開發(fā)服務(wù)器webpack-dev-server轉(zhuǎn)發(fā)到 "http://127.0.0.1:8080"，即轉(zhuǎn)發(fā)到后端服務(wù)。pathRewrite用于路徑轉(zhuǎn)換，具體取決于你請(qǐng)求的uri與后端服務(wù)實(shí)際uri的差異，比如你本地起的80端口，你的uri為 "http://localhost/api"，將為轉(zhuǎn)換成 "http://127.0.0.1:8080/api/v1"。
詳細(xì)配置請(qǐng)移步 webpack devServer。

三、nginx反向代理

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

四、后端實(shí)現(xiàn)CORS接口

CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前所有現(xiàn)代瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
對(duì)于前端開發(fā)者來(lái)說(shuō)，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。

后端實(shí)現(xiàn)CORS接口只需合理設(shè)置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();
});
...