因為瀏覽器有同源策略的限制，導致我們在本地開發的時候，請求不同域名的接口會存在跨域的問題

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

代理方式能夠實現的機制大體：

本地服務器 --》 代理 --》目標服務器 --》拿到數據后通過代理偽裝成本地服務請求的返回值 ---》瀏覽器收到返回的數據

一、vue腳手架

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

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

可以看到 proxyTable?

關于proxyTable 是利用?http-proxy-middleware?插件來完成的

配置代碼

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

　　

?

轉載于:https://www.cnblogs.com/zuobaiquan01/p/10334261.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。