vue项目配置本地代理解决跨域问题

最新推荐文章于 2024-08-12 13:22:54 发布

草深无处不鸣蛙

最新推荐文章于 2024-08-12 13:22:54 发布

阅读量2.9k

点赞数 2

文章标签： vue.js webpack 前端

本文链接：https://blog.csdn.net/qq_45846691/article/details/106843955

版权

本文介绍了如何在Vue项目中通过配置本地代理来解决跨域问题。原理是利用服务器不受同源策略限制，通过修改vue-cli的proxyTable或vue.config.js中的proxy设置，将API请求转发到目标服务器，从而避开浏览器的跨域限制。同时，文章还提到了pathRewrite的作用以及如何根据开发环境和生产环境配置不同的API路径。

摘要由CSDN通过智能技术生成

vue项目配置本地代理解决跨域问题

原理：之所以出现跨域是因为浏览器为安全起见采取的同源策略的限制，即域名，协议，端口相同，所以我们在本地开发环境请求后台接口时浏览器会出现跨域的错误，配置本地代理是利用了服务器是不存在同源策略的限制这个原理来解决跨域问题的。当客户端发送请求时，请求本域服务器，再由本域服务器请求数据并响应返回给客户端。
在这里插入图片描述

vue-cli 2.x搭建的项目在config 文件夹的index.js文件中找到开发环境dev里面的proxyTable
然后进行如下配置：

module.exports = {
dev: {
    proxyTable: {
     '/api/': {     
     target: 'http://abc.com', // 开发环境下要跨域访问的接口域名
     changeOrigin: true,  //是否跨域
     pathRewrite: {
              '^/api/': ''   //表示访问接口时/api/会被重写成''
            }
          },
       }, 
      } 
}

‘/api/’代理的一个标志，表示以‘/api’开头的路径，在请求的时候会被代理成我们上面设置的接口域名，比如，我们写的接口是/api/abc/xxx,最终请求的路径会被替换成http://abc.com/api/abc/xxx，从而解决在本地开发环境下调接