Vue-cli代理解决跨域问题

最新推荐文章于 2023-08-29 20:18:45 发布

转载最新推荐文章于 2023-08-29 20:18:45 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fanjuncheng666/p/9553997.html

文章标签：

#javascript #ViewUI

博客介绍了代理服务器，其是网络信息中转站，可将域名转换形成同源以实现访问。还讲解了在Vue里设置代理的方法，在config目录找到并在dev里添加proxyTable，可解决开发环境的跨域问题，但生产环境非同源仍存在跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue-cli调接口的时候，总是会出现垮与问题，因为vue的localhost与访问域名不一致导致。而这一点，开发者显然也想到了，故而在vuejs-templates，也就是vue-cli的使用的模板插件里，有关于API proxy的说明，这个配置就是将localhost映射成访问的域名。

那么何为代理？

代理服务器英文全称是Proxy Server，其功能就是代理网络用户去取得网络信息。形象的说：它是网络信息的中转站。可以简单粗暴理解为把你的域名转换成你访问的域名，（我这么记的，当然可能并不恰当）形成同源，就能访问。

那么在vue里，如何设置代理？

1.config目录找到index.js

2.在dev里添加proxyTable

 dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api':{
            target:"http://47.93.166.112/BrainPcWeb",//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin:true,
            pathRewrite:{
                '^/api':''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 
                          //比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login’即可
            }
        }
    }