因?yàn)闉g覽器有同源策略的限制，導(dǎo)致我們在本地開發(fā)的時(shí)候，請(qǐng)求不同域名的接口會(huì)存在跨域的問題

解決跨域的問題有很多方式，這里主要整理下代理模式來解決跨域的問題

代理方式能夠?qū)崿F(xiàn)的機(jī)制大體：

本地服務(wù)器 --》 代理 --》目標(biāo)服務(wù)器 --》拿到數(shù)據(jù)后通過代理偽裝成本地服務(wù)請(qǐng)求的返回值 ---》瀏覽器收到返回的數(shù)據(jù)

一、vue腳手架

vue? 基于?vue init webpack my-project 構(gòu)架的腳手架（https://github.com/vuejs-templates/webpack）

在項(xiàng)目目錄中找到根目錄下config文件夾下的index.js文件 官方文件目錄：https://github.com/vuejs-templates/webpack/blob/develop/template/config/index.js

可以看到 proxyTable?

關(guān)于proxyTable 是利用?http-proxy-middleware?插件來完成的

配置代碼

proxyTable: {'/api': {target: 'http://api.xxx.com', // 目標(biāo)接口域名changeOrigin: true, // 是否跨域pathRewrite: {'^/api': '/' // 重寫接口}} },

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/zuobaiquan01/p/10334261.html

總結(jié)

以上是生活随笔為你收集整理的webpack中跨域请求proxy代理(vue与react脚手架不同设置方法)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。