本篇内容介绍了“Vue-cli3跨域问题如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1:将任何未知请求转发到代理服务器如:前端地址
本篇内容介绍了“Vue-cli3跨域问题如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
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是一款友好的、多用途且高性能的javascript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的html、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
“vue-cli3跨域问题如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!
--结束END--
本文标题: vue-cli3跨域问题如何解决
本文链接: https://www.lsjlt.com/news/345896.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0