webpack配置中的跨域(ProxyTable)

今天咱們就來聊聊前端工程中跨域請求數據交互的問題,在之前的項目中,咱們多是經過後端配置用同源策略或是用 jsonp 的形式 去處理先後臺數據交互的問題,在工程化項目中,咱們用的是用代理的形式處理的。css

ProxyTable

proxyTable 屬性是用來配置跨域請求接口的,拿 vue-cli 舉例,咱們要在項目目錄中找到根目錄下 config 文件夾下的 index.js。由於咱們在開發環境中調試,因此選擇在 Dev 裏面配置,相似以下:前端

// 開發配置
    dev: {
        assetsRoot: path.resolve(__dirname, "../dist"),
        // 靜態資源文件夾
        assetsSubDirectory: "static",
        // 發佈路徑
        assetsPublicPath: "/",
        // Various Dev Server settings
        host: "localhost",
        // dev-server監聽的端口
        port: 8080,
        autoOpenBrowser: true,
        proxyTable: {
            //綜合收件
            '/api': {
                target: "http://www.baidu.com", //開發環境
                changeOrigin: true,
                pathRewrite: {
                    '^/api': 'api'
                }
            },
        }
        //是否使用 cssSourceMap
        cssSourceMap: false
    }
複製代碼

上面這段代碼的效果就是將本地8080端口的一個請求代理到了 www.baidu.com 這個域名下:vue

'http://localhost:8080/api' => 'http://www.baidu.com'
複製代碼

ProxyTable 的原理

dev-server 使用了很是強大的 http-proxy-middleware 包,更多功能,請查看 官網文檔git

相關文章
相關標籤/搜索