axios跨域代理设置baseURL的一些问题

km233

已于 2022-08-24 16:13:26 修改

阅读量2.1w

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js

于 2021-12-25 15:26:06 首次发布

本文链接：https://blog.csdn.net/km233/article/details/122101496

本文介绍了Vue项目中如何通过axios和环境变量配置proxy解决跨域问题，以及baseURL在开发和生产环境的不同用途，包括全路径配置以请求外站资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、为什么会跨域

先了解跨域的概念：发送请求的url的协议、域名、端口三者之间任意一个与当前页面的地址不同则视为跨域。

axios解决跨域很简单，只需要在 vue.config.js 设置 proxy 就可以了。

vue.config.js

devServer: {
    port: 8888,
    proxy: {
      '/dev-server':{
        target: 'http://localhost:8886/',
        // 跨域配置
        changeOrigin: true,
        // 路径重写 
        pathRewrite:{
              '^/api': '/'
          }
      },
      '/prod-server':{
        target: 'http://localhost:8887/',
        // 跨域配置
        changeOrigin: true,
        // 路径重写 
        pathRewrite:{
              '^/api': '/'
          }
      }
    }
  }

封装axios请求。

import axios from 'axios'

const baseUrl = "dev-server"

class HttpRequest {

  constructor(baseUrl){
    this.baseUrl = baseUrl
  }

  getDefaultConfig(){
    const config = {
      baseURL: this.baseUrl
    }
    return config
  }

  request(options){
    const instance = axios.create()
    options = Object.assign(this.getDefaultConfig(), options)
    return instance(options)
  }

}

export default new HttpRequest(baseUrl)

处理跨域问题很简单，只需要设置baseURL，将端口进行代理于同一端口下，即使前后端分离，只要前端能直接访问到target的地址就问题不大。

2、开发环境生产环境自动配置

在Vue项目的根目录下分别建立两个文件

.env.development 和 .env.production ，其中的 ' . ' 字符不可忽略。

#开发
.env.development
VUE_APP_BASEURL=/dev-server

#生产
.env.production
VUE_APP_BASEURL=/prod-server

development 开发环境，和上面 vue.config.js 配置的 dev-server 相对，在开发时 axios 获取 server 的 baseURL 就会匹配 http://localhost:8886/ 这个地址。

production 生产环境，和上面 vue.config.js 配置的 prod-server 相对，打包之后访问 http://localhost:8887/ 需要注意的是打包之后 Vue 的代理就失效了，需要 nginx 将后台服务代理到同一个端口上。

封装axios请求。

import axios from 'axios'

const baseUrl = process.env.VUE_APP_BASEURL

class HttpRequest {

  constructor(baseUrl){
    this.baseUrl = baseUrl
  }

  getDefaultConfig(){
    const config = {
      baseURL: this.baseUrl
    }
    return config
  }

  request(options){
    const instance = axios.create()
    options = Object.assign(this.getDefaultConfig(), options)
    return instance(options)
  }

}

export default new HttpRequest(baseUrl)

nginx.conf

location /server {
		root /data;
		index index.html;
		autoindex off;
}
location /prod-server
{
	  proxy_pass http://127.0.0.1:8887;
}

3、baseURL的作用

看了很多文章设置baseURL都是用来区分开发和部署环境的，这个用法没有问题，而且确实很方便。

#相对地址
.env.development
VUE_APP_BASEURL=/dev-server

#绝对地址
.env.production
VUE_APP_BASEURL=http://127.0.0.1:8887/prod-server

baseURL还有一个作用就是直接请求原地址。

开发时配置 proxy 的 name 时请求的是基于 VUE 代理的相对地址