开发与生产阶段跨域问题

总结

1. 在具体项目中， 跨域可以分为开发阶段与生产阶段
2. 在开发阶段里： 跨域又分为全前端与后端，全前端可以服务器代理的方式解决，后端可以运行各种请求头或者使用cors插件
3. 在生产阶段（打包后）： 跨域就不能用代理服务器了，就只能后端解决，可以使用环境变量来控制两种跨域

开发

代理

vue.config.js 配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 禁用全局提醒
  lintOnSave: false,
  // 代理，前端跨域
  devServer: {
    proxy: 'http://localhost:3000'
  },
  // 打包路由位置, 解决本地网页获取
  publicPath: './' 
  // 
})

里面所有的网络请求都会基于proxy的网址，所有改为网址之后就可以了

  axios({
    url: '/home'
  }).then(res=>{
    console.log( res );
  })

生产

生产阶段可采用环境变量

// 根目录创建.env.development 与 .env.production
// 写入
VUE_APP_TITLE = 'lxailsy'

// VUE_APP_ENV = 'dev'
VUE_APP_ENV = 'pro'

VUE_APP_BASEA_API = 'http://localhost:3000'

封装axios函数，改变请求地址

import axios from 'axios';
export default {
    $axios(options){
        let apiUrl = null
        if (process.env.VUE_APP_ENV == 'dev'){
            // 开发环境
            apiUrl = options.url
        } else {
            // 生产环境
            apiUrl = process.env.VUE_APP_BASEA_API + options.url
        }
        console.log(apiUrl)
        return axios({
            url : apiUrl
        })
    }
}

但就算这样还要后端解决跨域

router.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});