webpack之proxyTable设置跨域

在项目开发中,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调;但是当我们现在使用vue-cli脚手架搭建项目的时候,我们需要在本地启动服务器;比如本地开发环境http://localhost:8080 这样的访问页面,但是我们的接口地址是http://xxxx.com/device/index 这样的接口地址时,我们这样直接使用会存在跨域的请求,那么直接请求就会失败。因此我们需要在打包的时候配置一下proxyTable;

至于出现跨域的问题就是因为浏览器有同源策略的限制,但服务器是没有的,所以前端也可以使用代理的方式大致可以解决如上的跨域问题;

那么proxyTable是我们在本地开发环境中调试接口用的,目的就是为了解决本地跨域的问题,因为本地的地址是http://localhost:8080在线上的生产环境是没有什么用的;

JSONP的方式

<script>标签里的src是没有跨域限制的,<img>标签里的src也是没有限制跨域的,我们在写页面的时候不难发现这一点。JSONP就是通过在本站脚本创建一个<script>便签,将地址指向第三方的API地址来达到第三方的通讯的目的,并提供一个回掉函数来接收数据,第三方响应为JSON数据的包装,这是JSONP名字的由来;

JSONP的局限性: 只支持get方式的http请求,不能解决不同域的两个页面之间如何进行Javascript调用的问题

proxyTable的原理

proxyTable反向代理，本方法是在本地的浏览器中创建一个服务器，然后让自己的服务器去请求目标服务器。而且跨域是针对Javascript来说的，Javascript是插入HTML页面在浏览器上执行的脚本。服务器之间是可以随便请求数据而不受限制的。我们通过自己创建的服务器去请求目标服务器，然后再从我们客户端去请求我们创建的服务器，这样就不存在跨域的问题了;

proxyTable的反向代理，实际上利用http-proxy-middleware这个插件完成的，就是我们本地服务器将请求转发给目标服务器，具体实现如下:

本地服务器 -> 代理 -> 目标服务器 -> 拿到数据后通过代理伪装成本地服务请求的返回数据->然后浏览器就可以获取到数据

*有关于API proxy的说明

proxyTable配置

To configure the proxy rules, edit dev.proxyTable option in config/index.js, The dev server is using http-proxt-middleware for proxying, so you should refer to its docs for detailed usage, But here’s simple example:

'use strict'

const path = require('path');
Module.exports = {
    dev: {
		// paths
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		cssUrlPublicPath: '/',
		proxyTable: {
			stg: {
				'/a/brmsd-ac/emp/nadms': {
					target: 'https://abc.com.cn',
					changeOrigin: true,
					secure: false,
					pathRewrite: {
						'^/a/brmsd-ac/emp/nadms': '/a/brmsd-ac/emp/nadms'
					} 
                                },
				'/a/brmsd-ac/emp/nadms': {
					target: 'https://abc.com.cn',
					changeOrigin: true,
					secure: false,
					pathRewrite: {
						'^/a/brmsd-ac/emp/nadms': '/a/brmsd-ac/emp/nadms'
                                        }
                                }
			},
			dev: {
				'/a/brmsd-ac/emp/nadms': {
					target: 'https://abc.com.cn',
					changeOrigin: true,
					secure: false,
					pathRewrite: {
						'^/a/brmsd-ac/emp/nadms': '/a/brmsd-ac/emp/nadms'
					} 
                                }
                        }
                }
	}
`

The above example will proxy the request /a/brmsd-ac/emp/nadms/xxxxx(the module of name) to http://abc.com.cn/a/brmsd-ac/emp/nadms/xxxxx on stg environment.