首页 > 其他分享 >vue开发本地跨域配置(代理proxy)

vue开发本地跨域配置(代理proxy)

时间:2023-03-13 10:58:17浏览次数:54  
标签:vue http 跨域 dxy api proxy test 8080 net

问题
我们本地调试一般都是 npm run serve,然后打开 本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了

复习一下跨域的解决方案
jsonp
cors
Node中间件代理(两次跨域)
nginx反向代理
CORS支持所有类型的HTTP请求,是跨域HTTP请求的根本解决方案
JSONP只支持GET请求,JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
不管是Node中间件代理还是nginx反向代理,主要是通过同源策略对服务器不加限制。
日常工作中,生产环境用得比较多的跨域方案是cors和nginx反向代理。
本地项目中调试用的最多的就是 node 代理,当然像 nginx、charles(抓包工具)做代理也可以,只要你会配置。

原理
vue 中的 proxy 就是利用了 Node 代理,原理还是因为服务器端没有跨域这一说嘛,也是用了这么一个插件 地址(http-proxy-middleware)

场景
1、假设你要调取的接口是 http://e.dxy.net/api/test,然后你可以在本地调 localhost:8080/api/test,如axios.get('/api/test')
配置代理后,会做如下转发:
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/bcma/api/test -> http://e.dxy.net/bcma/api/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
proxy: {
'/api': {
target: 'http://e.dxy.net', // 后台接口域名
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
}
}
}

有新手朋友可能会问:这样做是不是只是本地调试这样做,线上怎么办呢?
我们一般调接口 axios.get('/api/test'),这样调是自动请求的当前域名,也就是本地就调用 localhost:8080,到了线上就是你们自己的服务域名,所以这个只是为了本地调试使用。当然,如果你要同时调用很多个不同的域名服务,那你调用的时候就要把相关的域名明确写出来,如axios.get('http://e.dxy.net/api/test')

2、当你调接口后端的命名没有统一给接口前加 /api 这类的标识,那么你可以自己加,也就是你可以在本地调 localhost:8080/api/test,如axios.get('/api/test'),而你要的目标接口是 http://e.dxy.net/test,你就可以用 pathRewrite,遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重写为 /。
所以转发效果就是:
localhost:8080/api/test -> http://e.dxy.net/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
proxy: {
'/api': {
target: 'http://e.dxy.net', // 后台接口域名
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
'^/api': '/'
}
}
}
}

3、这个是对所有的接口都代理的,不止是检测到 /api 的接口,比如:
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/test -> http://e.dxy.net/test

devServer: {
proxy: 'http://e.dxy.net'
}

扩展几个常用的devServer配置
完整版
1、 devServer.disableHostCheck
当设置为true时,此选项将绕过主机检查。不建议这样做,因为不检查主机的应用程序容易受到DNS重新绑定攻击。

module.exports = {
//...
devServer: {
disableHostCheck: true
}
};

2、devServer.publicPath
假设服务器在http://localhost:8080下运行,output.filename设置为bundle.js。默认情况下,devServer.publicPath是/,所以您的包可以作为http://localhost:8080/bundle.js 使用。将devServer.publicPath更改为 /assets/ 就变为 http://localhost:8080/assets/bundle.js

module.exports = {
//...
devServer: {
publicPath: '/assets/'
}
};

确保devServer.publicPath始终以正斜杠开头和结尾。
————————————————

当你调接口后端的命名没有统一给接口前加 /api 这类的标识,那么你可以自己加,也就是你可以在本地调 
localhost:8080/api/test,如axios.get('/api/test'),
而你要的目标接口是 http://e.dxy.net/test,
你就可以用 pathRewrite,遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重写为 /
————————————————

devServer: {
 port: 8120, // 本地启动端口
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: false,        //如果要代理 websockets,配置这个参数
          secure: false,  // 如果是https接口,需要配置这个参数
          changeOrigin: true,  //、是否跨域
//       pathRewrite: {
//             '^/erpApi': 'api'
//          }
      },
      erpApi: {
          target: process.env.VUE_APP_API_BASE_URL,
          ws: false,
          changeOrigin: true,
          pathRewrite: {
            '^/erpApi': 'api'
          }
        }
  },
},
// 所有接口都代理
devServer: {
    proxy: 'http://e.dxy.net'
}

 

 



转:https://blog.csdn.net/weixin_43972437/article/details/107291071

标签:vue,http,跨域,dxy,api,proxy,test,8080,net
From: https://www.cnblogs.com/ygyy/p/17210482.html

相关文章

  • vue-cli-service build --mode 区分多个环境
    有些时候,我们的项目会打包部署到多个环境,可能在不同环境中,我们需要进行区分,做不同的操作,这时候我们可以利用打包的--mode。1.首先在package.json增加打包各模式的命令语......
  • Vue.js框架:单个div盒子(元素)放至全屏显示
    一、页面元素需要全屏展示的div或其他元素标签的id要设置,方便获取dom节点。再添加一个可以触发点击事件的元素进行操作。<divid="fullDom"><span@click......
  • windows部署vue项目:nginx
    一点废话:vue部署这个事儿原本是打算写上下两篇的,上篇nginx下篇tomcat,很完美。奈何笔者太菜tomcat还没学会,只好附点使用记录,等实操过了再来补全。在此立个flag,期待一下我薛......
  • 我的第一个vue页面
    1.使用编辑器打开我们使用vue-cli创建的项目2.创建自己的vue文件  1)在views文件夹中创建vue组件  注意:首字母大写eg.HelloView.vue<!--在页面中显示的内容-->......
  • vue以及vue脚手架的安装
    一、安装nodejs1.下载nodejs安装包,双击安装2.配置需要图片展示的配置addtopath是添加环境变量,全局使用node3.修改安装路径不想安装到c盘,点击change,改变安装路径......
  • webpack、vite、vue-cli、create-vue 的区别
    首先说结论Rollup更适合打包库,webpack更适合打包项目应用,vite基于rollup实现了热更新也适合打包项目。功能工具工具脚手架vue-clicreate-vue构建项目 vit......
  • 建立新的vue项目
    1、win+R打开cmd.    2、开始新建项目 3、显示成功 4、cnpminstall安装模块到node_modules目录 5、跳到项目运行 6、成功,网页输入http://localh......
  • 【django-vue】课程表数据录入 课程分类接口 所有课程接口 课程详情接口 所有章节接口
    目录上节回顾APSchudler双写一致性今日内容1课程表数据录入2课程分类接口2.1路由2.2序列化类2.3视图类3所有课程接口(过滤,排序)3.1表模型3.2序列化类课程动态显示......
  • Vue2入门之超详细教程一-环境准备
    1、简介Vue.js(通常被简称为Vue)是一个用于构建用户界面的渐进式JavaScript框架。它被设计为易于逐步采用,因此可以逐渐应用到现有项目中,也可以作为新项目的基础。Vue具......
  • 2、获取vue.js步骤
    1、访问vue官网:https://cn.vuejs.org/        ......