使用vue-cli開發時跨域問題

打開config文件夾下的index.js,配置proxyTable：

{
    ...
    dev：{
         ...
        
        proxyTable: {
             '/api': {
                    target: 'http://localhost',
                    changeOrigin: true  // 必須，為true的話，請求的header將會設置為匹配目標服務器的規則（Access-Control-Allow-Origin）
             }
        }      
    }
}

 

 

 

其中，taget是要訪問的api的地址，配置完proxyTable后，若要訪問'http://localhost/api/books'，ajax里的url只需設為'/api/books'即可，webpack會幫你把‘/api’下的請求轉發至'http://localhost/api'！

如果不想傳遞‘/api’ 到請求路徑，可以這樣配置：

{
    ...
    dev：{
         ...
        
        proxyTable: {
             '/api': {
                     target: 'http://localhost',
                     changeOrigin: true,
                     pathRewrite: {"^/api" : ""}
             }
        }      
    }
}    

參考文檔： webpack， vue-cli