webpack之proxyTable设置跨域

为什么要使用proxyTable

很简单，两个字，跨域。
在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。当然跨域有多种解决方式，这里就不一一例举，下次弄篇文章单独讲，在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。

如何使用proxyTable

还是拿之前使用过的vue-cli举例。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，自然而然是要配置在dev里面：

dev: {env: require('./dev.env'),port: 8080,autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://www.abc.com',  //目标接口域名changeOrigin: true,  //是否跨域pathRewrite: {'^/api': '/api'   //重写接口}},cssSourceMap: false
}

上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下：

'http://localhost:8080/api' ===> 'http://www.abc.com/api'

没有统一项目名下的使用

上面那种情况是有一个统一的项目名api的，所以说是比较好匹配的，就相当于说直接将以api开头的接口名代理一下换成目标域名访问就好了，可是如果说后台返给我们前端的接口没有了统一的项目名呢？之前，我是一个个单独去做了转换，接口少还没什么关系，但多了肯定是不现实的，前段时间在一次面试中受到了面试官的启发想到了这样一种取巧的方案：

//先人为给接口地址前面加上一个自定义的项目名
let someApi = 'api' + '/xx/xx';dev: {env: require('./dev.env'),port: 8080,autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://www.abc.com',  //目标接口域名changeOrigin: true,  //是否跨域pathRewrite: {'^/api': '/'   //重写接口}},cssSourceMap: false
}

这里的项目名api是我们人为加上去的，经过代理之后就没了，这样我们在配置代理这里还是只需要配置一份就够了，只是在写接口地址时要注意区分开发环境和线上环境就可以了。

关于proxyTable的原理

我在网上查了一下，这个代理实际上是利用http-proxy-middleware这个插件完成的，具体到这个插件的运行机制，由于是英文再加上能力有限就没深究了。但我想探究的是这种代理方式实际上是如何做到的，我看网上有人说实际上就是我们的本地服务器将请求转发给了目标服务器。之所以出现跨域是因为浏览器有同源策略的限制，但服务器是没有的，所以这种代理方式能够实现的机制大体就是：

本地服务器 --》代理 --》目标服务器 --》拿到数据后通过代理伪装成本地服务请求的返回值 ---》然后浏览器就顺利收到了我们想要的数据

这是我的简单理解，按这个理解来说的话只要服务器允许跨域，任何人都能够拿到它的数据吗？那样同源策略不就大大弱化了吗？目前对这个问题还不是太理解，希望有想法的小伙伴留言指正！

webpack之proxyTable设置跨域相关推荐

proxy跨域不生效_vue前后端端口号不同，proxytable代理跨域无效
前后端都部署在我的电脑上,只有端口号不同,前端用的vuecli,采用自带的proxytable设置跨域,但是ajax发送请求的时候,却没有变端口号,状态返回404 dev配置如下 dev: { // ...
php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...
vue加跨域代理静态文件404_vue-cli 设置跨域代理线上地址报404
vue-cli 设置跨域代理,本地正常访问,线上地址报404.这是什么原因? vue-cli中跨域代理设置: module.exports = { dev: { // Paths assetsSubD ...
iview-cli 设置跨域代理服务器
1.打开 webpack.dev.config.js 2.//设置跨域代理 devServer: { historyApiFallback: true, hot: true, inline: true ...
proxyTable解决跨域
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 跨域报错截图: 配置proxyTable解决跨域 1.proxyTable在根目录下config文件夹下的index.js文件的 ...
C# WebAPI设置跨域
C# WebAPI设置跨域设置前端跨域请求很简单,只需要两个步骤 1.安装package Install-Package Microsoft.AspNet.WebApi.Cors 2.WebApiC ...
html action能跨域么,ASP.NET MVC 中设置跨域
原标题:ASP.NET MVC 中设置跨域来源:GetPower cnblogs.com/gdpw/p/9236661.html 程序员共读整理发布,转载请联系作者获得授权ASP.NET MVC中设 ...
node ，express框架后台设置跨域操作,路由中间件
express项目入口文件下app.js 设置跨域操作 app.all('*', function(req, res, next) { res.header("Access-Control- ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...

webpack之proxyTable设置跨域

webpack之proxyTable设置跨域

webpack之proxyTable设置跨域相关推荐

最新文章

热门文章