vue中使用.env.development配置axios全局访问路由

可以在Vue项目根目录下的`.env.development`文件中添加如下配置：

VUE_APP_API_BASE_URL=http://localhost:3000/api

然后在项目中使用axios时，在`main.js`中添加如下代码：

import axios from 'axios'

axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL
Vue.prototype.$http = axios

这样就可以在项目中全局使用`this.$http`来进行访问了。注意，这里的`process.env.VUE_APP_API_BASE_URL`就是从`.env.development`文件中读取的值。在生产环境中，可以在`.env.production`文件中添加相同的配置，这样在生产环境中也可以使用相同的配置。

相关问题

vue中生产环境使用.env.development配置axios全局访问路由

在Vue中，可以通过在main.js中配置axios来实现全局访问路由。首先，在main.js中导入axios和VueRouter：

import axios from 'axios'
import VueRouter from 'vue-router'

然后，在Vue实例中配置axios和VueRouter：

const router = new VueRouter({
  mode: 'history',
  routes
})

Vue.prototype.$axios = axios
Vue.prototype.$router = router

最后，在需要使用axios和router的组件中，可以通过`this.$axios`和`this.$router`来访问axios和router：

this.$axios.get('/api/data').then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

this.$router.push('/about')

在生产环境中，可以通过在`.env.production`文件中配置变量来指定axios的请求路径：

VUE_APP_API_URL=http://example.com/api

然后，在axios的配置中使用该变量：

axios.defaults.baseURL = process.env.VUE_APP_API_URL

vue2解决axios跨域实例项目

Vue2中解决axios跨域问题通常是在后端设置允许跨域的响应头，但是前端也可以通过以下几种方式进行处理：

1. **全局配置**：在axios的创建实例时，添加`proxyTable`选项，如果你使用的是webpack dev server，可以配置代理。例如：

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8080';
axios.interceptors.request.use(config => {
  if (process.env.NODE_ENV === 'development') {
    // 开发环境才开启代理
    const proxyHost = process.env.VUE_APP_PROXY_HOST || 'http://localhost:3000'; // 你的API服务器地址
    config.url = `${proxyHost}${config.url}`;
  }
  return config;
}, error => Promise.reject(error));

2. **路由钩子**：在每个需要发送请求的组件内，可以在beforeCreate、created等生命周期钩子中添加对跨域的检查和设置：

export default {
  created() {
    this.$axios.get('your-api-url').then(response => ...);
  },
  methods: {
    async fetchData() {
      await this.$axios.get('your-api-url', { headers: {'X-Requested-With': 'XMLHttpRequest'} });
    }
  }
};

这里的关键是添加`X-Requested-With`头，告诉服务端这是跨域请求。

3. **CORS策略**：如果后端支持CORS（Cross-Origin Resource Sharing），则需要在服务器端设置相应的响应头，如`Access-Control-Allow-Origin`。