Vue3:解决基地址不同 数据交互http与https跨域问题

配置公共管理的api文件和vue.config.js可以解决跨域问题。一个项目对接不同的基地址和接口同理。

api

javascript 复制代码
export default {
  //接口基地址
  Millia: process.env.NODE_ENV == 'development' ? location.protocol + '//' + location.host + '/milliaApi' : 'http://xx.xxx.xxxx/index.php/',
  MilliaStudy:process.env.NODE_ENV=='development'?location.protocol+'//'+location.host+'/MilliaStudyApi':'https://xx.xxx.xxxx/xxx',


  //不同接口
  GETREC:'api/XXXXX',
  GETCATEGORY:'api/XXXX',
}

vue.config.js

javascript 复制代码
//devServer 是一个本地开发服务器,会自动监听变化,自动打包构建,自动更新刷新浏览器
  devServer: {
    hot: true, //热加载
    host: 'localhost',
    port: 8080, //端口
    https: false, //false关闭https,true为开启
    open: true, //自动打开浏览器
    proxy: {
      '/milliaApi': {
        target: 'https://xx.xxx.xxxx/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/milliaApi': '/'
        }
      },
      '/MilliaStudyApi': {
        target: 'http://xx.xxx.xxxx/xxx',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/MilliaStudyApi': '/'
        }
      },
    }
  },

基地址对应不同的http协议(http和https),线上项目会报跨域

方法一:

去除api和vue.config.js里 http: 和 https: 不会报跨域但是有

方法二:

不修改api和vue.config.js,在index.html的head中中添加

html 复制代码
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
相关推荐
2501_915918411 小时前
iPhone 抓包工具有哪些?多工具对比分析优缺点
websocket·网络协议·tcp/ip·http·网络安全·https·udp
工控小楠1 小时前
Modbus TCP转Profinet网关实现视觉相机与西门子PLC配置实例研究
modbustcp·网络协议·tcp/ip·profinet
半路_出家ren1 小时前
传输层协议TCP、UDP
网络协议·tcp/ip·udp·tcp
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路2 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
小何学计算机3 小时前
HTTPS工作原理
网络协议·http·https
1undefined23 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck4 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序