vue本地运行开发,为什么要配置changeOrigin: true

changeOrigin: true是在配置反向代理时常见的一个选项,通常用于解决跨域请求的问题。Vue本地运行时,可能会涉及到前端应用与后端服务不在同一个域的情况,这就会触发浏览器的同源策略,阻止跨域请求。

使用Vue CLI(或其他类似的工具)在本地运行时,可以通过配置代理来解决跨域问题。changeOrigin: true是其中的一个配置选项,它的作用是将请求的头部的Host字段改为被代理服务器的Host字段。

举例来说,假设前端应用运行在http://localhost:8080,而后端服务运行在http://localhost:3000。如果不启用changeOrigin: true,那么通过代理发往后端的请求头中的Host字段仍然是localhost:8080,而不是localhost:3000。有些后端服务器会根据Host字段进行处理,如果不匹配,就可能拒绝服务。

启用changeOrigin: true会将请求头中的Host字段更改为被代理服务器的Host,确保请求能够正确地被后端服务器处理。

示例配置:

javascript 复制代码
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

上述配置表示,所有以/api开头的请求会被代理到http://localhost:3000,并且会修改请求头中的Host字段。这样,你就可以在本地开发时解决跨域问题。

相关推荐
两个西柚呀4 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H56 小时前
App开发框架调研对比
前端
桃子不吃李子6 小时前
axios的二次封装
前端·学习·axios
SteveJrong7 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~7 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发7 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii7 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack8 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好8 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O8 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js