iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue使用反向代理解决跨域问题方案
  • 470
分享到

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

vue反向代理解决跨域问题vue跨域 2023-01-10 18:01:50 470人浏览 泡泡鱼
摘要

目录为什么要解决跨域问题在单文件组件中如何去解决跨域问题后端数据接口:猫眼验证中心配置反向代理配置模板文件及字段解释整个配置反向代理的思路解决接口重复问题为什么要解决跨域问题 因为

为什么要解决跨域问题

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

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

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

因为服务器没有跨域限制,只有浏览器有跨域限制,所以我们可以通过我们自己的服务器去拿回后端服务器接口的数据,再传给前端; 我们自己的服务器是:启动单文件组件项目会启动一台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反向代理解决跨域问题的资料请关注编程网其它相关文章!

--结束END--

本文标题: vue使用反向代理解决跨域问题方案

本文链接: https://www.lsjlt.com/news/177330.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • vue使用反向代理解决跨域问题方案
    目录为什么要解决跨域问题在单文件组件中如何去解决跨域问题后端数据接口:猫眼验证中心配置反向代理配置模板文件及字段解释整个配置反向代理的思路解决接口重复问题为什么要解决跨域问题 因为...
    99+
    2023-01-10
    vue反向代理解决跨域问题 vue 跨域
  • vue如何使用反向代理解决跨域问题
    这篇文章主要讲解了“vue如何使用反向代理解决跨域问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue如何使用反向代理解决跨域问题”吧!为什么要解决跨域问题因为浏览器有限制,只有同域名同...
    99+
    2023-07-04
  • Nginx配置反向代理解决跨域问题
    通过Nginx配置反向代理结果跨域问题 第一步:下载Nginx 一、下载 官网下载地址:http://nginx.org/en/download.html 我下载的版本:http://nginx.or...
    99+
    2023-09-06
    nginx 服务器 运维
  • JS跨域解决方案react配置反向代理
    跨域解决方案   jsonp(模拟get) CORS(跨域资源共享) 代理 iframe postMessage window.name WebSocket react的代理实现跨域...
    99+
    2022-11-12
  • webpack-dev-server如何设置反向代理解决跨域问题
    这篇文章主要为大家展示了“webpack-dev-server如何设置反向代理解决跨域问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“webpack-dev-...
    99+
    2022-10-19
  • 宝塔面板使用Nginx反向代理解决跨域问题,超简单!!
            至于跨域的概念,云服务器、域名的购买,宝塔面板的安装等等就不再过多赘述,有不清楚的可以看看别的教程~         步入主题—— 目标:请求http://api.xxxxxx.com//userinfo获取数据 1.打开面...
    99+
    2023-09-12
    服务器 nginx
  • vue怎么解决代理和跨域问题
    这篇“vue怎么解决代理和跨域问题”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么解决代理和跨域问题”文章吧。一、安...
    99+
    2023-07-04
  • vue中proxy代理的用法(解决跨域问题)
    目录声明1. 首先我们应该知道2. 跨域,什么是跨域呢?问题跨域的解决方案代理服务器是如何解决跨域的?proxy配置以vue cli3.0为例总结声明 1. 首先我们应该知道 前端a...
    99+
    2022-12-09
    vue proxy代理 proxy解决跨域 vue跨域问题
  • 关于SpringBoot与Vue交互跨域问题解决方案
    目录浏览器同源策略一、VUE前端配置代理解决跨域(1)Vue中让浏览器请求携带cookie(2)vue中配置代理解决跨域第一步,设置统一访问路径第二步、配置跨域代理第三步、测试请求二...
    99+
    2022-11-12
  • 解决vue cli3使用axios跨域问题
    目录一、什么是跨域1、跨域2、同源策略3、跨域问题怎么出现的二、使用 axios 演示并解决跨域问题(vue-cli3.0)1、项目创建、与 axios 的使用2、跨域问题重现3、解...
    99+
    2022-11-13
  • Vue-Cli配置代理转发解决跨域问题的方法
    目录vue-cli中集成的跨域解决方案vue-cli解决跨域配置说明基地址重启项目,验证结果小结vue-cli中集成的跨域解决方案 思路: 在前端服务和后端接口服务之间 架设一个中...
    99+
    2022-11-13
  • vue 处理跨域问题及解决方法小结
    当你在发送网络请求的时候,出现以下保存信息,恭喜你跨域了 Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has ...
    99+
    2022-11-12
  • vue项目配置代理如何解决跨域问题
    目录Vue项目配置代理1. 这里以axios发请求为例2. 如果发送的请求都以 /abc 开头3. 代理多个接口什么是跨域?配置(vue.config.js)总结Vue项目配置代理 ...
    99+
    2023-01-28
    vue项目配置代理 vue跨域 vue配置代理
  • 详解使用ChatGPT解决Nginx反向代理的问题
    目录背景使用ChatGPT解决总结背景 我有 3 台服务器,1台Web服务器对外提供访问,另外两台服务器 QC1 和 QC2 用于存储不同设备识别后保存的照片。它们的 IP 地址...
    99+
    2023-03-20
    ChatGPT Nginx反向代理 Nginx反向代理解决
  • vue项目实现webpack配置代理,解决跨域问题
    目录webpack配置代理,解决跨域主要是这句话vue跨域问题,修改代理后仍404接口请求用法webpack配置代理,解决跨域 在config文件夹中的index.js文件配置 主要...
    99+
    2022-11-13
  • 怎么使用ChatGPT解决Nginx反向代理的问题
    这篇文章主要讲解了“怎么使用ChatGPT解决Nginx反向代理的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用ChatGPT解决Nginx反向代理的问题”吧!背景我有 3 台服...
    99+
    2023-07-05
  • 跨域设置Cookie失效问题解决方案原理分析
    目录问题出现场景代码实现如下登陆接口相关代码问题出现的解决方案如下反思和结语问题出现场景 在做登录功能时,想把用户的信息通过Set-cookie在客户端设置cookie信息。 1.服...
    99+
    2022-11-13
  • 解决vue项目中前后端交互的跨域问题、nginx代理配置方式
    目录vue前后端交互的跨域问题、nginx代理配置1.安装axios2.解决跨域问题前后端分离项目的跨域问题及解决跨域简述解决办法vue前后端交互的跨域问题、nginx代理配置 最近...
    99+
    2022-11-13
  • vue-electron使用serialport时问题解决方案
    报错如下: Uncaught TypeError: Cannot read property 'modules' of undefined at Object.eval (webp...
    99+
    2022-11-12
  • 怎么用iframe设置代理解决ajax跨域请求问题
    本篇内容介绍了“怎么用iframe设置代理解决ajax跨域请求问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作