vue 项目配置跨域之配置代理服务器

139 阅读1分钟

1 . 在request.js文件中

    import axios from 'axios'

// 创建了一个新的axios实例

const service = axios.create({
// baseURL:'<http://ihrm.itheima.net/>'  //这里是服务器的目标地址会和浏览器冲突不同源 所以    需要使用代理服务器 如下
  //情况1 如果没有.env.development文件这直接如下设置
// baseURL:'/api/'      //它会自动拼接当前自己本地服务器的地址         
 <http://localhost:9528/api/sys/login>
//情况2  如果有.env.development文件则在这个文件中设置api  步骤见 步骤 2
baseURL: process.env.VUE\_APP\_BASE\_API,   
timeout: 5000  //设置网络请求的超过时间    当前设置的是5秒  如果请求时间超过会报错

})

步骤 2

在 .env.development文件中 设置如下

  # just a flag
  ENV = 'development'
  # base api
  VUE\_APP\_BASE\_API = '/api'

在 .env.production文件中 设置如下

 # just a flag
 ENV = 'production'
 # base api
 VUE\_APP\_BASE\_API = '/prod-api'

3. 配置代理服务器:

   proxy: {
   //跨域情况   http://localhost:9588/api/login -> http://localhost:3000/api/login
   // 如果请求地址以/api打头,就出触发代理机制
   //api': {  //这里是根据接口基础路径的中的端口号后面的路径决定
   target: 'http://ihrm.itheima.net',// 我们要代理的真实接口地址 1
   // target: 'http://192.168.103.48:3000' // 我们要代理的真实接口地址 2
    }
    }