Vue跨域配置文件和axios配置使用

wycooooo

已于 2022-07-11 18:56:57 修改

阅读量329

点赞数

文章标签： vue.js javascript 前端

于 2022-06-15 01:14:57 首次发布

本文链接：https://blog.csdn.net/weixin_46144517/article/details/125289243

版权

本文主要探讨Vue项目中如何解决跨域问题，详细解析了在vue.config.js文件中的配置步骤，并介绍了axios的基本配置用法，帮助开发者理解和实践前端跨域请求的设置。

摘要由CSDN通过智能技术生成

1.Vue跨域问题对应配置文件

根目录/vue.config.js

// 跨域配置
module.exports = {
  devServer: {
    port: 9090,  //设置本地默认端口 选填
    proxy: { // 设置代理 重要
      '/api': { // 设置拦截器 拦截器格式：斜杠+拦截器名字，名字自定义
        target: 'http://localhost:8080', // 代理的目标地址
        changeOrigin: true, // 是否设置同源
        pathRewrite: { // 路径重写
          '/api': '' // 选择忽略拦截器里面的单词
        }
      }
    }
  }
}

2.vue使用axios基本配置

import axios from 'axios'

const request = axios.create({
    timeout: 5000
})

// request拦截器 请求发送前队请对进行一些处理
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    return config;
}, error => {
    return Promise.reject(error);
});

// respond拦截器 可以在请求响应后进行一些处理
request.interceptors.response.use(response => {
    let re