一、生产环境跨域:请参考 nginx解决跨域问题

二、开发环境跨域:

  • 使用vue-cli搭建的前端项目,可通过在vue.config.js文件中配置代理解决。
module.exports = {
  // 配置代理,解决跨域问题
  devServer: {
    port: '8080', // 设置端口号
    https: false, //是否使用https协议
    open: true,//启动后,使用默认浏览器打开网页
    hot: true, //是否启用模块的热替换功能,devServer的默认行为是在发现源代码被变更后,通过自动刷新整个页面来做到实时预览,开启hot后,将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
    proxy: {
      '/api': {
        target: 'http://192.168.10.202:80', //API服务器的地址
        logLevel: "debug",//开启debug模式后,可在终端查看代理的真实请求地址
        ws: true, //代理websockets
        changeOrigin: true, // 是否跨域,虚拟的站点需要更改origin
        pathRewrite: {
          //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
          '^/api': '/aaa/ccc',
        }
      },
    },
  }
};
Logo

前往低代码交流专区

更多推荐