Kc's blog
kc_shen
2025-07-23
目录

谷歌浏览器设置跨域配置

# 概述

在开发过程中，经常会遇到跨域问题。谷歌浏览器提供了临时禁用同源策略的启动参数，可以用于本地开发和测试。

# 使用场景

  • 本地开发时测试跨域接口
  • 调试前后端分离项目
  • 测试第三方API集成
  • 开发环境下的快速验证

# 配置方法

# macOS 系统

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/kc/MyChromeDevUserData
1

# Windows 系统

"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security --user-data-dir=C:/tmp
1

# Edge 浏览器

# Windows 系统

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --disable-web-security --user-data-dir=C:/tmp
1

# macOS 系统

open -n /Applications/Microsoft\ Edge.app/ --args --disable-web-security --user-data-dir=/Users/kc/MyEdgeDevUserData
1

# 参数说明

  • --disable-web-security: 禁用网页安全策略，允许跨域请求
  • --user-data-dir: 指定用户数据目录，避免影响正常使用的浏览器配置
  • -n: 强制打开新窗口（macOS专用）

# 注意事项

⚠️ 重要提醒：

  • 此配置仅适用于开发环境，不要在生产环境使用
  • 使用完毕后请关闭该浏览器实例
  • 该配置会降低浏览器安全性，仅用于开发调试
  • 建议使用独立的用户数据目录，避免影响正常浏览

# 替代方案

如果不想修改浏览器配置，也可以考虑：

# 1. 使用浏览器插件（推荐）

# CORS Unblock 插件使用教程

安装步骤：

  1. 打开 Chrome 网上应用店或 Microsoft Edge 插件商店
  2. 搜索 "CORS Unblock"
  3. 点击"添加至 Chrome/Edge"安装插件

使用方法：

  1. 安装完成后，在浏览器右上角找到插件图标
  2. 点击图标启用/禁用跨域功能
  3. 绿色状态表示已启用，灰色表示已禁用
  4. 刷新页面即可生效

优点：

  • 操作简单，一键开关
  • 不影响正常浏览
  • 可以针对特定网站启用
  • 无需重启浏览器
  • 支持 Chrome 和 Edge 浏览器

注意事项：

  • 仅适用于开发环境
  • 某些复杂跨域场景可能仍需其他方案

# 2. 配置开发服务器代理

# 工作原理

开发服务器代理通过在本地服务器和远程API之间建立中间层，将跨域请求转发到目标服务器，从而绕过浏览器的同源策略限制。

# 常见配置示例

Vue CLI (vue.config.js):

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Webpack Dev Server:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        secure: false
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

Express 中间件:

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/api', createProxyMiddleware({
  target: 'http://localhost:3000',
  changeOrigin: true,
  logLevel: 'debug'
}));
1
2
3
4
5
6
7

# 潜在隐患

⚠️ 安全风险：

1. 数据泄露风险

  • 请求/响应记录：代理服务器会记录所有经过的敏感数据（密码、token、个人信息等）
  • 日志文件泄露：代理日志可能包含敏感信息，如果日志文件被访问可能导致数据泄露
  • 内存数据泄露：代理服务器内存中可能缓存敏感数据

2. 认证绕过风险

  • Cookie 处理不当：代理可能错误处理认证Cookie，导致认证失效
  • Header 丢失：某些认证Header可能在代理过程中被过滤或修改
  • SSL/TLS 证书验证：代理可能绕过SSL证书验证，降低安全性

3. 数据篡改风险

  • 响应内容修改：恶意代理可能修改API响应内容
  • 请求参数篡改：代理可能修改请求参数或添加恶意参数
  • 注入攻击：代理可能成为代码注入或SQL注入的入口点

4. 中间人攻击风险

  • 代理服务器被攻破：攻击者可能控制代理服务器
  • 网络嗅探：代理可能被用于网络流量嗅探
  • 会话劫持：攻击者可能通过代理劫持用户会话

⚠️ 开发风险：

  • 环境差异：代理环境与生产环境不一致，可能导致部署问题
  • 调试困难：错误可能被代理层掩盖，增加调试复杂度
  • 性能影响：额外的代理层可能影响请求性能
  • 配置复杂：复杂的代理规则可能导致维护困难

⚠️ 生产风险：

  • 误用风险：开发配置可能被误用到生产环境
  • 依赖问题：过度依赖代理可能导致架构问题
  • 扩展性限制：代理可能成为系统扩展的瓶颈

# 具体攻击场景

场景1：代理服务器被恶意利用

攻击者 → 控制代理服务器 → 修改API响应 → 用户收到恶意数据
1

场景2：敏感信息泄露

用户请求 → 代理记录敏感数据 → 日志文件被访问 → 数据泄露
1

场景3：认证绕过

用户登录 → 代理处理认证 → 认证信息丢失 → 用户被误认为未登录
1

# 防护措施

1. 安全配置

  • 使用HTTPS加密传输
  • 启用SSL证书验证
  • 配置适当的认证机制
  • 限制代理访问权限

2. 数据保护

  • 不记录敏感数据到日志
  • 定期清理代理缓存
  • 加密存储代理配置
  • 实施数据脱敏

3. 监控审计

  • 实时监控代理活动
  • 记录异常访问行为
  • 定期安全审计
  • 设置告警机制

4. 访问控制

  • 限制代理服务器访问范围
  • 实施IP白名单
  • 使用强密码和密钥
  • 定期更新代理软件

# 3. 使用 Node.js 中间件处理跨域

# 工作原理

Node.js 中间件通过在服务器端设置 CORS 响应头，允许特定域名的跨域请求，这是最标准和安全的跨域解决方案。

# 安装依赖

# 使用 npm
npm install cors

# 使用 yarn
yarn add cors
1
2
3
4
5

# 基本配置

Express.js 应用：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有域名访问（不推荐用于生产环境）
app.use(cors());

// 或者配置特定域名
app.use(cors({
  origin: ['http://localhost:3000', 'https://yourdomain.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 高级配置

1. 动态域名配置：

const corsOptions = {
  origin: function (origin, callback) {
    // 允许没有 origin 的请求（如移动端应用）
    if (!origin) return callback(null, true);
    
    const allowedOrigins = [
      'http://localhost:3000',
      'https://yourdomain.com',
      'https://app.yourdomain.com'
    ];
    
    if (allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
  optionsSuccessStatus: 200
};

app.use(cors(corsOptions));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 针对特定路由的 CORS：

// 全局 CORS 配置
app.use(cors({
  origin: 'http://localhost:3000'
}));

// 特定路由的 CORS 配置
app.get('/api/sensitive-data', cors({
  origin: 'https://trusted-domain.com',
  credentials: true
}), (req, res) => {
  res.json({ data: 'sensitive information' });
});
1
2
3
4
5
6
7
8
9
10
11
12

3. 预检请求处理：

app.use(cors({
  origin: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
  credentials: true,
  preflightContinue: false,
  optionsSuccessStatus: 204
}));
1
2
3
4
5
6
7
8

# 手动设置 CORS 头（不使用 cors 包）

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  
  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
  } else {
    next();
  }
});
1
2
3
4
5
6
7
8
9
10
11
12

# 环境配置

开发环境配置：

const isDevelopment = process.env.NODE_ENV === 'development';

const corsOptions = {
  origin: isDevelopment 
    ? ['http://localhost:3000', 'http://localhost:3001']
    : ['https://yourdomain.com'],
  credentials: true
};

app.use(cors(corsOptions));
1
2
3
4
5
6
7
8
9
10

生产环境配置：

const corsOptions = {
  origin: process.env.ALLOWED_ORIGINS?.split(',') || ['https://yourdomain.com'],
  credentials: true,
  optionsSuccessStatus: 200
};

app.use(cors(corsOptions));
1
2
3
4
5
6
7

# 安全最佳实践

1. 严格限制域名：

const allowedOrigins = [
  'https://yourdomain.com',
  'https://www.yourdomain.com'
];

app.use(cors({
  origin: function (origin, callback) {
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('CORS policy violation'));
    }
  }
}));
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 环境变量配置：

// .env 文件
ALLOWED_ORIGINS=https://yourdomain.com,https://www.yourdomain.com

// 应用配置
require('dotenv').config();

app.use(cors({
  origin: process.env.ALLOWED_ORIGINS?.split(',') || [],
  credentials: true
}));
1
2
3
4
5
6
7
8
9
10

3. 错误处理：

app.use(cors({
  origin: 'https://yourdomain.com'
}));

// CORS 错误处理
app.use((err, req, res, next) => {
  if (err.message === 'CORS policy violation') {
    res.status(403).json({
      error: 'CORS policy violation',
      message: 'Origin not allowed'
    });
  } else {
    next(err);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 注意事项

⚠️ 安全考虑：

  • 不要在生产环境使用 origin: '*'
  • 严格限制允许的域名列表
  • 谨慎使用 credentials: true
  • 定期审查和更新允许的域名

⚠️ 性能考虑：

  • CORS 中间件会增加请求处理时间
  • 预检请求会增加额外的网络开销
  • 复杂的 origin 验证函数可能影响性能

⚠️ 兼容性考虑：

  • 确保支持所有必要的 HTTP 方法
  • 处理 OPTIONS 预检请求
  • 考虑旧版本浏览器的兼容性
编辑 (opens new window)
#浏览器#跨域#开发工具
上次更新: 2025/07/24, 2:07:00
adb操作记录
nodejs全局代理服务器

← nodejs全局代理服务器→

最近更新
01
nodejs全局代理服务器
07-23
02
记账心得
07-10
03
服务器密码管理与自动部署
04-23
更多文章>
Theme by Vdoing | Copyright © 2019-2025 kc shen | MIT License 豫ICP备2024074563号-3