vue中解决跨域问题的配置-proxy

最新推荐文章于 2025-04-27 08:41:23 发布

原创最新推荐文章于 2025-04-27 08:41:23 发布 · 321 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

1 篇文章

订阅专栏

跨域是浏览器基于同源策略实施的安全措施，当协议、主机或端口不同时发生。解决跨域问题可以使用代理配置，如示例中设置/aUserApi接口，目标地址为http://192.168.1.219:8000，启用ws，改变源并重写路径去除/aUserApi前缀。

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

一、什么是跨域
跨域本质是浏览器基于同源策略的一种安全手段
所谓同源（即指在同一个域）具有以下三个相同点

协议相同（protocol）
主机相同（host）
端口相同（port）

非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域
二、如何解决
“/aUserApi”:{} : 引号中代表监测的是以 /aUserApi开头的接口
target : 本地服务器地址改为后端接口地址 ip:port
changeOrigin : 是否跨域（true/false）
ws : 如果要代理 websockets，配置这个参数
secure : 如果是https接口，需要配置这个参数（如果是http接口，也可以不写这个参数）
pathRewrite ：检查代理的请求中是否有 /aUserApi，有的话把 /aUserApi替换为冒号后面的内容，案例为替换成空字符串，也就是去掉 /aUserApi。（^是正则表达式的内容，意思是以什么开头）

'/aUserApi': {
    target: 'http://192.168.1.219:8000',
    ws: true,
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      '^/aUserApi': ''
    }
  }