vue-cli跨域处理——代理配置

最新推荐文章于 2024-07-23 21:45:00 发布

柴九哥-

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量453

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_66333916/article/details/125435490

版权

vue-cli跨域处理——代理配置

1、为什么会出现跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）,当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

2、通过代理实现跨域

原理：就是通过代理的方法，蒙蔽浏览器，让浏览器以为没有跨域。但是请求的时候是通过代理的url地址发送的请求。

实现：

1、首先在 .env.development文件中修改base api 为 ‘/api’

# base api
VUE_APP_BASE_API = '/api'  

port = 8080  //端口号
2、在vue.config.js 文件找到devServer 对象中设置代理

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 添加开发服务器代理配置
    proxy: {
      // 以 key: value 的形式指定, 需要转发的路径模式: 转发的目标对象
      '/api': {//需要代理的接口 api
        // target: 'http://localhost:5000',//请求的目标服务器
        changeOrigin: true, //是否跨域
        // pathReWrite:{'^/api':'api'} //重写
      }
    }
  },
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000（代理服务器欺骗服务器骗他是一个端口号）
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true

说明：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。