vue跨域

最新推荐文章于 2025-04-28 15:23:26 发布

原创最新推荐文章于 2025-04-28 15:23:26 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这篇博客介绍了在Vue.js开发环境中如何解决本地跨域问题，主要通过vue.config.js的proxy属性进行配置，设置代理名称、代理地址和重写路径。对于线上跨域，讲解了在nginx.conf文件中利用location和proxy_pass进行代理配置。同时，文章还展示了如何创建axios实例并设置请求和响应拦截器。

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

1.vue中本地跨域如何解决?
本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称代理地址开启跨域重写路径

2.线上跨域如何解决?
线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址

import axios from 'axios';

const api = axios.create({
  baseURL:'https://api.it120.cc/small4',
  timeout: 5000
})

// 请求拦截，
api.interceptors.request.use(config => { 
  
  return config
},err => {
  return Promise.reject(err)
})

// 相应拦截
api.interceptors.response.use(res => {
  
  return Promise.resolve(res.data);
},err => {
    return Promise.reject(err)
})

export default api;