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">
相关推荐
ElasticPDF-新国产PDF编辑器3 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
前端·vue.js·pdf
ElasticPDF-新国产PDF编辑器4 小时前
Vue PDF Annotation plugin library online API examples
javascript·vue.js·pdf
老华带你飞4 小时前
木里风景文化|基于Java+vue的木里风景文化管理平台的设计与实现(源码+数据库+文档)
java·数据库·vue.js·毕业设计·论文·风景·木里风景文化管理平台
ElasticPDF-新国产PDF编辑器5 小时前
Vue 项目使用 pdf.js 及 Elasticpdf 教程
javascript·vue.js·pdf
OpenTiny社区5 小时前
TinyPro 中后台管理系统使用指南——让页面搭建变得如此简单!
前端·vue.js·开源
我有一只臭臭6 小时前
Vue中webpack的使用
前端·vue.js·webpack
勘察加熊人6 小时前
vue记忆卡牌游戏
javascript·vue.js·游戏
醋醋7 小时前
Vue2源码记录3
前端·vue.js