我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue使用反向代理解决跨域问题方案

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue使用反向代理解决跨域问题方案

为什么要解决跨域问题

因为浏览器有限制,只有同域名同端口号下的数据才能拿来用;

那如果想拿到不同域名不同端口号下的数据就不行了;

在单文件组件中如何去解决跨域问题

因为服务器没有跨域限制,只有浏览器有跨域限制,所以我们可以通过我们自己的服务器去拿回后端服务器接口的数据,再传给前端; 我们自己的服务器是:启动单文件组件项目会启动一台8080端口号的服务器;

解决跨域问题需要配置反向代理代码; 如何配置反向代理代码:

用axios向后端数据接口发起请求,拿回数据:

在App.vue中引入axios模块,没下载的先下载: 下载:

npm i --save axios 引入 axios模块:

import axios from 'axios' 发axios请求:

后端数据接口:猫眼验证中心

mounted () {
    axios.get('/api/mmdb/movie/v3/list/hot.json?ct=%E6%89%AC%E5%B7%9E&ci=120&channelId=4')
    .then(res => {
      console.log(res.data.hot)
    })

配置反向代理

在项目文件夹下新建一个 vue.config.js 的文件,然后写上下面这段代码(可参照下面的配置模板文件):

module.exports = {
  //配置反向代理
    port: 8080,
    host: 'localhost', // ip 本地
    open: true,
    proxy: {
      "/api": {
        target: `http://10.43.8.102:55555/`,
        changeOrigin: true,
        ws: true, // 是否代理websockets
        pathRewrite: {
          "/api": ""
        }
      }
    }
}

注意: 写好配置代码以后,要重新运行项目,重启服务器;

配置模板文件及字段解释

module.exports = {
    devServer: {
        port: 8080, // 设置端口号
        host: 'localhost', // ip 本地
        disableHostCheck: true, //是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查
        hotOnly: false, // 热更新
        https: false, // https:{type:Boolean}配置前缀
        open: false, //配置自动启动浏览器
        proxy: null,  //设置代理
        proxy: { //目的是解决跨域,若测试环境不需要跨域,则不需要进行该配置
            '/api': { // 拦截以 /api 开头的url接口
                target: 'http://localhost:5140/api', //目标接口域名
                changeOrigin: true, //是否跨域
                ws: true, //如果要代理 websockets,配置这个参数
                secure: false, // 如果是https接口,需要配置这个参数
                // 标识替换
                // 原请求地址为 /api/getData 将'/api'替换''时,
                // 代理后的请求地址为: http://xxx.xxx.xxx/getData
                // 若替换为'/other',则代理后的请求地址为 http://xxx.xxx.xxx/other/getData 
                pathRewrite: { // 标识替换
                    '^/api': ''   //重写接口 后台接口指向不统一  所以指向所有/
                }
            }
        }
    },
}

整个配置反向代理的思路

我们要配置反向代理的原因是:因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据,这是浏览器的跨域限制,我们不能在浏览器上显示后端的数据,但是服务器端没有跨域限制,所以可以让我们自己的服务器(项目运行,会启动一台服务器),去请求后端服务器,拿到数据,然后再传给我们前端。 如何拿呢:按照上面的代码进行配置,axios.get后面的请求地址,原本是:第一张图这样子,

但是我们把前面域名给去掉,往下面这个接口发请求:

反向代理服务器的应用:往这个接口发请求,被拦截到了,凡是往这个接口发请求的,反向代理服务器,会在前面加上target域名 ,往真实的地址去请求。

配置信息:

只要是前端往‘/api’这个接口发请求的,前面都加上target里的这个域名,此时我们自己的服务器就知道最后是往这个地址请求数据:

解决接口重复问题

有时候会发现同一个接口的域名可能不一样,我们只需要拿指定域名的数据,比如说“/api”这个接口名字一样,但是这个接口前面的域名不一样,也就是两个不一样的地址,刚好就“api”这个名字重复了,如果还像上面那样配置的话,它就把所有“api”接口的地址前面全加上了一个域名。

解决办法:我们可以在加一个自定义接口,格式:“/名称”,例如:前面加个“/yiyi”:

然后在配置文件中加一个属性:pathRewrite

devServer: {
    proxy: {
      '/yiyi': {
        target: 'https://i.maoyan.com',
        changeOrigin: true,
        //路径重写
        pathRewrite: {
          '^/yiyi': ''
        }
      }
    }
  }

把“/api”改成“/yiyi”,然后加上一个pathRewrite属性,含义是路径重写,把自定义这个接口换成空,意思就是先按照“yiyi”这个名称去选出App.vue里“/yiyi”的接口,选出来后再把加的yiyi接口赋值为空,这样就可以避免和其他“api”接口的路径数据搞混了,最终拿到的数据接口还是:

以上就是vue使用反向代理解决跨域问题方案的详细内容,更多关于vue反向代理解决跨域问题的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue使用反向代理解决跨域问题方案

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue使用反向代理解决跨域问题方案

这篇文章主要为大家介绍了vue使用反向代理解决跨域问题方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-10

vue如何使用反向代理解决跨域问题

这篇文章主要讲解了“vue如何使用反向代理解决跨域问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue如何使用反向代理解决跨域问题”吧!为什么要解决跨域问题因为浏览器有限制,只有同域名同
2023-07-04

vue怎么解决代理和跨域问题

这篇“vue怎么解决代理和跨域问题”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么解决代理和跨域问题”文章吧。一、安
2023-07-04

vue中proxy代理的用法(解决跨域问题)

这篇文章主要介绍了vue中的proxy代理的用法(解决跨域问题),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-12-09

详解使用ChatGPT解决Nginx反向代理的问题

这篇文章主要为大家介绍了使用ChatGPT解决Nginx反向代理的问题详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-03-20

vue项目配置代理如何解决跨域问题

这篇文章主要介绍了vue项目配置代理如何解决跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-28

怎么使用ChatGPT解决Nginx反向代理的问题

这篇文章主要讲解了“怎么使用ChatGPT解决Nginx反向代理的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用ChatGPT解决Nginx反向代理的问题”吧!背景我有 3 台服
2023-07-05

跨域问题及常用的四种解决方案

跨域问题指的是在Web开发中,由于浏览器的同源策略限制,当一个网页尝试访问与它不同源(协议、域名或端口不同)的资源时,可能会遇到安全限制导致无法正常访问的问题。这种策略旨在防止恶意网站读取或修改其他网站的数据,保护用户信息安全。
跨域Web开发2024-11-29

编程热搜

目录