首页 > 其他分享 >如何实现前端跨域,配置代理

如何实现前端跨域,配置代理

时间:2023-12-18 21:13:38浏览次数:23  
标签:http 跨域 前端 代理 api true 服务端

// 在vue.config.js中配置代理 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({   transpileDependencies: true,    devServer: {     host: "localhost",     port: 8080, // 端口号     https: false, // https:{type:Boolean}     open: true, //配置自动启动浏览器     // proxy: 'http://localhost:3000' // 配置跨域处理,只有一个代理       // 配置多个代理     proxy: {       "/api": {         target: "https://echarts.apache.org/examples",// 要访问的接口域名         ws: true,// 是否启用websockets         changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题         pathRewrite: {             '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可           }       }     }   } }) //前端可以这样  this.$http         .get("/api/data/asset/geo/HK.json", { params: {} })         .then((GeoJSON ) => {           console.log(GeoJSON );           this.echarts.registerMap("HK", GeoJSON.data );         });   提前安装好全局的http-server,才可以使用this.$http.get() 

标签:http,跨域,前端,代理,api,true,服务端
From: https://www.cnblogs.com/freeWorlds/p/17912267.html

相关文章

  • VUE前端实现视频截图并上传到服务器
    做视频上传的时候有时候需要上传预览图,后端一般可以用FFMPEG来实现,前端也可以直接截图,这个功能不需要后台实现,VUE前端利用canvas画图,然后转换Base64就可以完成。1.前端代码<el-form-itemlabel="视频地址"requiredprop="videoURL"><el-upload:action="upload......
  • Nginx反向代理
    参考:https://mp.weixin.qq.com/s/2QVkA0ViNkO_i7fiZtIknQ反向代理是Nginx作为Web服务器最常用的功能之一。什么是反向代理呢?很多初学者在第一次遇到这个名词的时候总免不了出现很多问号。举个例子,小二的浏览器是无法直接访问谷哥的,但香港的代理服务器是可以访问谷哥的,于是小......
  • 【前端】做一个展示卡片样式数据的页面,解决卡片中图片高度不一致问题
    需求分析现在有这样一个需求,在一个页面展示数据,页面的数据通过卡片的形式展示,卡片中内容主要分为三部分,最上面个标题,中间是个图片,最下面是一排操作按钮。这里的卡片可以保证固定的宽高比例卡片可以随着窗口大小的变化做到自适应大小变化实际图片的高度和宽度不一致,显示的的时候可以......
  • 前端歌谣-第贰拾玖课-构造函数和实例化原理
    前言我是歌谣最好的种树是十年前其次是现在今天继续给大家带来的是构造函数和实例化原理的讲解环境配置npminit-yyarnaddvite-D修改page.json配置端口{"name":"demo1","version":"1.0.0","description":"","main":"index.js&qu......
  • Flask 解决前后端分离跨域问题
    背景:前端使用nginx或者在pycharm上选中浏览器打开。此时,前端一般为localhost:port,后端为127.0.0.1:5000,协议一样,但是域名和端口不一样,导致跨域问题一般解决办法【flask跨域问题】解决它_flask允许跨域-CSDN博客fromflaskimportFlaskfromflask_corsimportCORSapp=......
  • 前端体验优化(3)——后端
    前端很多时候是不会接触到后端的工作,不过我们公司由于历史原因,维护了大量的Node.js服务。所以也积累了一些后端优化的经验,主要分两块Node.js和数据库。一、Node.jsNode.js的监控没有从0开始,业务逻辑的日志直接记录在阿里云中,性能监控部署的是阿里云提供的系......
  • Linux配置成代理服务器
    简介: 代理服务器(ProxyServer)是一种位于计算机网络中的中间服务器,它充当了客户端和目标服务器之间的中介,用于转发客户端请求并获取目标服务器的响应。代理服务器的主要功能包括以下几点:什么是代理服务器   代理服务器(ProxyServer)是一种位于计算机网络中的中间服务器,它充......
  • [前端][Vue] 利用webstorage API存储数据
    关于webstorageAPI官方文档https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API省流说明1️⃣两种--localStorage&sessionStorage2️⃣存多久--local一直存到除非用户主动删,session等浏览器关掉就删3️⃣API--一样的,存setItem,读getItem,删一个remove,删全部......
  • 前端docx-templates生成word文档
    说明docx-templates项目地址:https://github.com/guigrpa/docx-templates原文:https://juejin.cn/post/7170695319004315679?searchId=202312171247306E0B93A485DAE6B4E304这个库能干啥?这个库能做的:替换Word模板中的文字实现FOR和IF操作在文档指定位置插入图片在模板里写......
  • 助教工作11月总结(前端开发技术)
    一、助教工作的具体职责和任务作为前端课程的助教,主要职责是协助老师完成一些课外的教学任务,具体包括但不限于以下内容:解答学生提出的问题:通过QQ群、邮件等方式与学生进行沟通,帮助他们解决在学习过程中遇到的问题和困惑。提供适当的指导和建议,引导学生找到解决问题的方法和思......