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

原创已于 2023-11-07 15:59:10 修改 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#http #vue.js #网络协议

于 2023-11-06 09:52:38 首次发布

Millia‘s work 专栏收录该内容

54 篇文章

订阅专栏

文章讲述了如何通过配置vue.config.js的devServer.proxy来处理不同基地址的跨域问题，以及提供两种方法：移除http/https前缀或在index.html中添加Content-Security-Policy元标签。

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

api

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

//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，修改public文件夹里的index.html在head中添加

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">