vue跨域解决方案

// 在 Vue 项目中解决跨域问题通常有多种方法，以下是几种常见的解决方案示例代码：

// 1. 使用代理服务器（推荐方式）
// 在 vue.config.js 文件中配置代理：
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 目标API服务器的地址
        changeOrigin: true,           // 是否改变请求源信息
        pathRewrite: {
          '^/api': ''                 // 重写路径，去掉/api前缀
        }
      }
    }
  }
};

// 2. 使用 CORS (Cross-Origin Resource Sharing)
// 在后端服务器配置CORS头，允许特定域名访问资源。例如在Express中：
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'http://yourdomain.com', // 允许访问的前端域名
  credentials: true               // 允许发送Cookie
}));

// 3. JSONP（仅限GET请求）
// 在 Vue 组件中使用 JSONP 请求：
methods: {
  fetchJsonpData() {
    this.$jsonp('http://example.com/jsonp')
      .then(json => {
        console.log(json);
      })
      .catch(err => {
        console.error(err.message);
      });
  }
}

// 4. Nginx 反向代理
# 在 Nginx 配置文件中添加以下内容：
location /api/ {
  proxy_pass http://example.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto $scheme;
}

以上是几种常见的 Vue 跨域解决方案及其示例代码。根据你的项目需求选择合适的方式进行配置。