如何设置 CORS允许跨域

news2024/10/11 15:24:12

设置CORS（跨源资源共享，Cross-Origin Resource Sharing）允许跨域访问是Web开发中常见的需求之一。CORS是一种安全机制，由浏览器实施，用于限制一个源（协议+域名+端口）上的网页脚本与另一个源上的资源交互的能力。下面是如何在服务器端设置CORS以允许跨域访问的一些常见方法。

1. Node.js (使用Express框架)

如果你使用的是Node.js，并且你的应用基于Express框架，可以通过以下方式设置CORS：

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

// 使用默认选项启用CORS
app.use(cors());

// 或者自定义CORS选项
app.use(cors({
  origin: 'http://example.com', // 或者 '*' 表示允许所有来源
  methods: 'GET,PUT,POST,DELETE', // 允许的HTTP方法
  credentials: true, // 是否允许凭证（如cookies）
  allowedHeaders: 'Content-Type,X-Requested-With', // 允许的头部
}));

// 设置路由
app.get('/', (req, res) => {
  res.send('Hello World!');
});

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

2. Java (使用Spring框架)

如果你的应用是基于Java并且使用了Spring框架，可以使用Spring的过滤器来设置CORS：

import org.springframework.web.filter.CorsFilter;

@Configuration
public class WebConfigurer {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowCredentials(true);
        configuration.addAllowedOrigin("*"); // 或者指定允许的源
        configuration.addAllowedHeader("*");
        configuration.addAllowedMethod("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);

        return new CorsFilter(source);
    }
}

3. PHP (使用Laravel框架)

如果你使用的是PHP并且使用了Laravel框架，可以通过中间件来设置CORS：

// 在 app/Http/Middleware/Cors.php 文件中配置
public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
}

// 在 app/Http/Kernel.php 文件中的 $middlewareGroups 中添加
'api' => [
    // ...
    \App\Http\Middleware\Cors::class,
],

// 在 routes/api.php 文件中使用
Route::middleware('cors')->group(function () {
    Route::get('/example', function () {
        return 'Hello from CORS-enabled API!';
    });
});

4. Python (使用Flask框架)

如果你使用的是Python并且使用了Flask框架，可以使用Flask-Cors库来简化CORS设置：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# 使用默认配置启用CORS
CORS(app)

# 或者自定义CORS配置
CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route('/')
def index():
    return 'Hello World!'

if __name__ == '__main__':
    app.run()