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">
相关推荐
幽络源小助理35 分钟前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
会飞的鱼先生1 小时前
Node.js-http模块
网络协议·http·node.js
鱼樱前端3 小时前
今天介绍下最新更新的Vite7
前端·vue.js
-qOVOp-5 小时前
408第三季part2 - 计算机网络 - ip分布首部格式与分片
网络协议·tcp/ip·计算机网络
数通Dinner5 小时前
RSTP 拓扑收敛机制
网络·网络协议·tcp/ip·算法·信息与通信
炒毛豆5 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅6 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水7 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了7 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry8 小时前
uniapp三步完成一维码的生成
前端·vue.js