仅允许从特定(其他)域访问文件夹中的文件

基础概念

跨域资源共享（CORS） 是一种机制，它使用额外的 HTTP 头来告诉浏览器，允许在一个域名的网页中访问另一个域名的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，会发起一个跨域 HTTP 请求。

类型

简单请求：满足一定条件的请求（如 GET、POST 方法，且 HTTP 头部有限制）。
预检请求：对于不满足简单请求条件的请求，浏览器会先发送一个 OPTIONS 请求进行预检。

应用场景

API 共享：允许特定的第三方应用访问你的后端服务。
静态资源分发：如 CDN 分发的文件，只允许特定网站加载。

实现方法

后端设置 CORS 头部

以下是一个使用 Node.js 和 Express 的示例：

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com'); // 允许的域名
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的请求方法
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头
  if (req.method === 'OPTIONS') {
    res.sendStatus(200); // 预检请求直接返回200
  } else {
    next();
  }
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is data from the server.' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

前端注意事项

确保前端代码在发起请求时，目标域名与后端设置的 Access-Control-Allow-Origin 一致。

遇到的问题及解决方法

问题：浏览器显示跨域错误

原因：浏览器出于安全考虑，阻止了跨域请求。

解决方法：

检查后端 CORS 设置：确保服务器正确设置了 Access-Control-Allow-Origin 头部。
代理服务器：在开发环境中，可以使用代理服务器转发请求，绕过浏览器的同源策略限制。

示例：使用 Nginx 作为反向代理

server {
  listen 80;
  server_name yourdomain.com;

  location /api {
    proxy_pass http://backend_server:3000;
    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;
  }
}

通过这种方式，前端可以请求 http://yourdomain.com/api/data，而实际上是由 Nginx 转发到后端服务器 http://backend_server:3000/data。