热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

详解vue-cli3中跨域解决方案

这篇文章主要介绍了vue-cli3中跨域解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批)

前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

0:前提条件

1:安装vue-lic

2:安装axios  用于发送请求。

1:将任何未知请求转发到代理服务器

如:

前端地址:127.0.0.1

后端地址:127.0.0.2

当访问地址为 127.0.0.1/api,没有匹配到这地址,那么就会被转发到代理服务器127.0.0.2/api

module.exports={
  devServer:{
    proxy: "http://www.acfun.cn"
  }
}

2:多代理控制

更多代理服务配置项搜索http-proxy-middleware查看

module.exports = {
  devServer: {
    proxy: {
      '/search': {  // search为转发路径
        target: 'http://www.acfun.cn', // 目标地址
        ws: true, // 是否代理websockets
        changeOrigin: true  // 设置同源 默认false,是否需要改变原始主机头为目标URL,        
      }
    }
  }
}; 

如:

当前访问地址为  xxx.xxx.xxx/search时,就会被转发到代理服务器http://www.acfun.cn/search

xxx.xxx.xxx/search -> http://www.acfun.cn/search

 3:实例

api.js 文件(主要用于全局配置)

import Axios from "axios";

let http = Axios.create({
  timeout: 3000,  //超时配置 3秒
  responseType: 'json',  // 响应数据格式
  responseEncoding: 'utf8', // 响应数据编码
});

export default http;

入口文件  main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import http from "./api";  // 引用axios全局配置

Vue.config.productiOnTip= false;

Vue.prototype.$http = http;  // 添加原型方法,这样创建的对象就自带该方法了。

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

vue.config.js 配置文件

更多代理服务配置项搜索http-proxy-middleware查看

module.exports = {
  devServer: {
    proxy: {
      '/search': {
        target: 'http://www.acfun.cn',
        ws: true,//是否代理websockets
        changeOrigin: true  // 设置同源 默认false,是否需要改变原始主机头为目标URL
      }
    }
  }
};

总结

以上所述是小编给大家介绍的vue-cli3 中跨域解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 深入浅出解析HTTP协议的核心功能与应用
    前言——协议是指预先设定的通信规则,确保双方能够按照既定标准进行有效沟通,从而实现准确的信息交换。例如,驯兽师通过拍手使动物坐下,这实际上是一种预设的协议。本文将详细探讨HTTP协议的核心功能及其广泛应用,解析其在现代网络通信中的重要作用。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 如何高效学习鸿蒙操作系统:开发者指南
    本文探讨了开发者如何更有效地学习鸿蒙操作系统,提供了来自行业专家的建议,包括系统化学习方法、职业规划建议以及具体的开发技巧。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • Fiddler 安装与配置指南
    本文详细介绍了Fiddler的安装步骤及配置方法,旨在帮助用户顺利抓取用户Token。文章还涵盖了一些常见问题的解决方案,以确保安装过程顺利。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • HTML5 WebSocket技术详解与应用前景
    WebSocket 是 HTML5 引入的一种在单一 TCP 连接上实现全双工通信的技术。作为一种高效且低延迟的协议,WebSocket 允许服务器和客户端之间进行实时双向数据交换。该技术不仅简化了开发过程,还显著提升了 Web 应用的性能和用户体验。未来,随着更多应用场景的探索,WebSocket 在实时通信领域的应用前景将更加广阔。 ... [详细]
  • 在CentOS 7上部署WebRTC网关Janus
    在CentOS 7上部署WebRTC网关Janus ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • 第一次写这玩意,不知道什么时候能写完,今天项目比较近,期望年底能看完吧。先定个小目标20201228完成第1章Spring介绍第2章入门第3章在Spring中引入IoC和DI第4章 ... [详细]
  • 用JSMpeg转播的视频流rtmp。在苹果手机ios12版本(11版本没试,10版本是好使的)在uc浏览器中无法播放。大佬们有啥解决方案吗? ... [详细]
  • 一.HTTP与TCP的关系HTTP属于应用层协议,主要解决如何包装数据;在传输层使用TCP协议,主要解决数据如何在网络中传输;在网络层使用IP协议,主要解决网络路由和寻址问题;HT ... [详细]
  • 了解_Istio是啥?一文带你彻底了解!
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Istio是啥?一文带你彻底了解!相关的知识,希望对你有一定的参考价值。 ... [详细]
author-avatar
杭州琦琦妈_120
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有