vue 跨域 解决方法

在Vue项目中，跨域问题通常是通过配置开发服务器或使用代理来解决的。以下是一些常见的解决方法：

1. 配置Vue开发服务器代理：

   在vue.config.js文件中，你可以设置一个代理来将API请求转发到目标域。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-domain.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在这个配置中，当你访问/api开头的路径时，开发服务器会自动将请求代理到http://target-domain.com。

2. 使用axios的请求拦截器添加CORS请求头：

   如果你使用axios作为HTTP客户端，你可以在请求拦截器中添加CORS请求头。

// main.js
import axios from 'axios';
 
axios.defaults.baseURL = '/api';
axios.defaults.withCredentials = true;
 
// 请求拦截器
axios.interceptors.request.use(config => {
  // 添加CORS请求头
  config.headers['Access-Control-Allow-Origin'] = '*';
  return config;
}, error => {
  return Promise.reject(error);
});

以上两种方法是跨域问题在Vue项目中常用的解决方案。第一种方法适用于开发环境，第二种方法更多是后端设置的范畴，但在某些情况下，前端也可以通过请求拦截来处理。