vue本地跨域实现与原理

1、实现1.1、使用proxyTable代理1.2、注意事项 2、proxyTable原理

1、实现

使用vue搭建的项目在本地与后端联调时，因为是使用node运行服务器，IP与后端不一致，所以会产生跨域问题，需要使用如JSONP、跨域代理等手段进行跨域请求，而vue已经帮我们配置好了，只需要设置一下proxyTable就行。

1.1、使用proxyTable代理

文件路径如下，在项目根目录下的config文件夹中的index.js中

配置代码如下

dev{ proxyTable: { '/api': { target: 'http://192.168.0.1:200', // 要代理的域名 changeOrigin: true,//允许跨域 pathRewrite: { '^/api': '' // 这个是定义要访问的路径，名字随便写 } } }

使用时代码

// /api/getMenu相当于*http://192.168.0.1:200/getMenu // /api相当于http://192.168.0.1:200 this.$http.get("/api/getMenu", { } .then(res => { }) .catch(function(error) { });

1.2、注意事项

以上面代码设置的为例，会把请求中所有带有/api字段的都替换掉，例如api/getMenu/api，前后两个都会被替换，导致404等错误，在代理数量比较多的时候容易出现这个问题。

2、proxyTable原理

浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run dev等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了亦曾代理，因为不会出现跨域问题。