webpack解決跨域及其原理

跨域問題的產生：瀏覽器用於隔絕潛在惡意文件的安全機制-同源策略限制非同源之間的資源進行交互。
webpack使用proxy解決跨域問題。
基於webpack-dev-server，只適合開發階段。
配置以下：

// ./webpack.config.js
const path = require('path')

module.exports = {
    // ...
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        //配置proxy
        proxy: {
            '/api': {
                target: 'https://api.github.com'
            }
        }
        // ...
    }
}

devServer裏面的proxy就是關於代理的配置，該屬性是一個對象，對象中的每個規則就是一個代理的規則匹配，屬性的名稱是須要被代理的請求路徑前綴，通常爲了辨別都會被設置爲/api，值爲對象的代理匹配規則，對應以下：

• target: 表示的是代理到的目標地址
• pathRewrite:默認狀況下，咱們的/api-hy也會被寫到RUL 中，若是但願刪除，可使用 pathRewrite
• secure ：默認狀況下不接受轉發到 https 的服務器上的，若是但願支持，能夠設置爲 false
• changeOrigin: 它是表示是否更新代理後請求的 headers 中的 host 地址

原理：
proxy 工做原理上市利用 http-proxy-middleware 這個http 代理中間件，實現請求轉發給其餘的服務器。以下：在開發階段，本地地址是

Http://loaclhost:3000 , 該瀏覽器發送一個前綴帶有 /api 標識的向拂去器請求數據，可是這個服務器只是將這個請求轉發給另外一臺服務器：

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

　　在開發階段，webpack-dev-server 會自動啓動一個本地開發服務器，因此咱們的應用在開發階段是獨立運行在 localhost 的一個端口上的，然後端服務器又是運行在另外一個地址上

　　因此在開發階段中，因爲瀏覽器的同源策略，當本地訪問的時候就會出現跨域資源請求的問題，經過設置 webpack proxy 實現代理請求後，至關於瀏覽器和服務器之間添加了一個代理着。當本地發送請求的時候，中間服務器會接受這個情求，並將這個請求轉發給目標服務器，目標服務器返回數據後，中間服務器又會將數據返回給瀏覽器，當中間服務器將數據返回給服務器的時候，它們二者是同源的，並不會存在跨域的問題。

　　服務器和服務器之間是不會存在跨域資源的問題的。