编程 vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置

2024-11-19 03:04:20 +0800 CST views 3370

#1. 开发环境跨域配置
在 vue.config.js 文件中:

module.exports = {
    runtimeCompiler: true,
    publicPath: '/', // 设置打包文件相对路径
    devServer: {
      // open: process.platform === 'darwin',
      // host: 'localhost',
      port: 8080,
      // open: true, //配置自动启动浏览器 
      proxy: {
        '/api': {
          target: 'http://1.b.cn:88/', //对应自己的接口
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
     }, 
  }

注意,配置完成后要重启服务
配置 axios 请求的 baseUrl
http.js文件中配置

axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = '/api/';

页面中发送请求:

this.$ajax.get('/api/index?page='+this.page)
      .then(function(res) {
        console.log(res);
      });

此时,虽然发送的请求到地址:http://127.0.0.10:8071/api/index?page=1, 但是已经代理到了地址: http://1.b.cn:88/api/index?page=1
0.png
2. 生产环境 api 请求接口 baseUrl 配置

axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = 'http://api.com/'

页面中 axios 请求地址的写法不变:

this.$ajax.get('/api/index?page='+this.page)
      .then(function(res) {
        console.log(res);
      });

实际请求地址为:http://api.com/api/index?page=1

效果图
2.png

复制全文 生成海报 Vue.js 前端开发 API请求

推荐文章

Grid布局的简洁性和高效性
2024-11-18 03:48:02 +0800 CST
php常用的正则表达式
2024-11-19 03:48:35 +0800 CST
CentOS 镜像源配置
2024-11-18 11:28:06 +0800 CST
地图标注管理系统
2024-11-19 09:14:52 +0800 CST
Golang 中你应该知道的 noCopy 策略
2024-11-19 05:40:53 +0800 CST
Rust 高性能 XML 读写库
2024-11-19 07:50:32 +0800 CST
使用Rust进行跨平台GUI开发
2024-11-18 20:51:20 +0800 CST
html一个全屏背景视频
2024-11-18 00:48:20 +0800 CST
php内置函数除法取整和取余数
2024-11-19 10:11:51 +0800 CST
Elasticsearch 的索引操作
2024-11-19 03:41:41 +0800 CST
php机器学习神经网络库
2024-11-19 09:03:47 +0800 CST
页面不存在404
2024-11-19 02:13:01 +0800 CST
MySQL 主从同步一致性详解
2024-11-19 02:49:19 +0800 CST
Python上下文管理器:with语句
2024-11-19 06:25:31 +0800 CST
deepcopy一个Go语言的深拷贝工具库
2024-11-18 18:17:40 +0800 CST
一个数字时钟的HTML
2024-11-19 07:46:53 +0800 CST
【SQL注入】关于GORM的SQL注入问题
2024-11-19 06:54:57 +0800 CST
Vue3中的事件处理方式有何变化?
2024-11-17 17:10:29 +0800 CST
MySQL数据库的36条军规
2024-11-18 16:46:25 +0800 CST
程序员茄子在线接单