今天咱們就來聊聊前端工程中跨域請求數據交互的問題,在之前的項目中,咱們多是經過後端配置用同源策略或是用 jsonp 的形式 去處理先後臺數據交互的問題,在工程化項目中,咱們用的是用代理的形式處理的。css
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'
複製代碼
dev-server 使用了很是強大的 http-proxy-middleware 包,更多功能,請查看 官網文檔 。git