身為一個碼農，在日常的開發過程中難免遇到API介面跨域的問題，今天主要整理一下導致跨域問題的原因以及常用的解決方案。

導致跨域問題的原因？

跨域問題其實是由瀏覽器的同源策略導致的。

同源策略限制了從同一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的重要安全機制。

常用的解決方案

解決跨域問題的方式有很多，一般有下面幾種：

1、 Cross-Origin Resource Sharing（CORS）跨域資源

2、JSONP

3、反向代理

4、document.domain

5、使用postMessage

6、WebSocket

7、關閉瀏覽器跨域限制（disable-web-security）

然而，在實際的開發過程中我們一般最常用的解決方案是CORS和反向代理。

跨域資源共享（CORS）

跨域資源共享（Cross-Origin Resource Sharing，簡稱 CORS），是 HTML5 提供的標準跨域解決方案。相較於JSONP的方式，CORS具有更多優勢：

• JSONP只能實現GET請求，而CORS支援所有型別的HTTP請求。

• 使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得資料，比起JSONP有更好的錯誤處理。

不過使用CORS來解決跨域問題需要服務端支援，然後通過設定Access-Control-Allow-Origin來解決跨域問題。

服務端如何實現CORS跨域資源共享？

我們以node服務為例，因為我個人比較喜歡使用koa2來進行Restful API的開發， 所以我們可以通過koa2-cors來快速實現服務對CORS的支援，具體實現示例程式碼：

var koa = require('koa');
var app = new koa();
var router = require('koa-router')();
//引入koa2-cors庫
const cors = require('koa2-cors');

app.use(cors({
    origin: function (ctx) {
        return
 
 "*"; // 允許來自所有域名請求
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))

router.post('/', async function (ctx) {
    ctx.body = 'hello，world'
});

app
    .use(router.routes())
    .use(router.allowedMethods());

app.listen(3000);

反向代理

除了使用CORS之外，我們也會經常通過設定反向代理服務來解決跨域問題。

一般情況下，我們可以直接通過配置nginx伺服器來實現反向代理功能；

因為我們公司後端是採用了微服務架構+閘道器（kong），所以可以直接在kong裡面配置路由規則；

如果自己是前端開發者並且使用了vue進行前端專案開發，我們只可以開啟專案中config資料夾下index.js檔案，然後在dev.proxyTable新增配置資訊就可以了。示例：

var path = require('path')

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    dev: {
        env: require('./dev.env'),
        port: 8087,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',

        //################################################################配置資訊
        proxyTable: {
            '/api': {
                target: 'http://13.63.***.**',//填寫需要代理的真實地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        //################################################################配置資訊
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
    }
}

補充

如果我們希望可以最快速的解決跨域問題，然後進行臨時除錯，我們可以直接通過關閉chrome的安全設定（不推薦）。

具體實現方式

1、在桌面找到瀏覽器快捷圖示並點選滑鼠右鍵的屬性一欄

2、在屬性頁面中的目標輸入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData,user-data-dir可以是任意路徑，如下圖所示：

3、儲存並重啟瀏覽器