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">
相关推荐
一只很酸de橘子8 分钟前
关于https请求丢字符串导致收到报文解密失败问题
网络协议·http·https
一城烟雨_33 分钟前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
涵信3 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
帽儿山的枪手4 小时前
socket套接字你搞清楚了吗
网络协议·面试
涵信4 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
白山云北诗4 小时前
什么是 DDoS 攻击?高防 IP 如何有效防护?2025全面解析与方案推荐
网络协议·tcp/ip·ddos·高防ip·ddos攻击怎么防·高防ip是什么
mxbb.5 小时前
我的HTTP和HTTPS
网络协议·http·https
Zz_waiting.5 小时前
网络原理 - 10(HTTP/HTTPS - 1)
网络·http·https
Mr.app6 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛6 小时前
vue组件间通信
前端·javascript·vue.js