温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue使用proxyTable实现跨域的原理

发布时间:2020-11-20 17:17:30 来源:亿速云 阅读:540 作者:Leah 栏目:web开发

本篇文章为大家展示了vue使用proxyTable实现跨域的原理,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

1、实现

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

1.1、使用proxyTable代理

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

vue使用proxyTable实现跨域的原理

配置代码如下:

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实际上是将请求发给自己的服务器,再由服务器转发给后台服务器,做了亦曾代理,因为不会出现跨域问题。

上述内容就是vue使用proxyTable实现跨域的原理,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI