还能设置多个 Access-Control-Allow-Origin ？

前端黑板报

发布于 2024-06-03 11:11:32

2.9K00

代码可运行

文章被收录于专栏：前端黑板报前端黑板报

运行总次数：0

代码可运行

Access-Control-Allow-Origin 是 HTTP 头部的一部分，用于实现跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）。当一个网页尝试从与自身来源不同（即跨域）的服务器上获取资源时，浏览器会实施同源策略，阻止这种请求，除非服务器明确许可这种跨域访问。Access-Control-Allow-Origin 头就是服务器用来告知浏览器哪些网站可以访问其资源的一种方式。

使用方法

设置单一源

如果你希望只允许特定的源访问资源，可以在服务器端响应中设置 Access-Control-Allow-Origin 头，指定允许的源域名：

Access-Control-Allow-Origin: https://example.com

这表示只有来自 https://example.com 的网页可以成功请求此服务器上的资源。

允许所有源

如果你想允许任何源访问资源（注意这样做可能会带来安全风险），可以设置 Access-Control-Allow-Origin 为通配符 *：

Access-Control-Allow-Origin: *

动态设置

在某些情况下，你可能需要根据请求的来源动态设置这个头部。以下是一个简单的示例，展示了如何在 Node.js 的 Express 应用中动态设置 Access-Control-Allow-Origin：

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

app.use((req, res, next) => {
  // 允许特定的源或者 *
  const allowedOrigins = ['https://example.com', 'https://another-example.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  } else {
    res.setHeader('Access-Control-Allow-Origin', '*'); // 或者拒绝请求
  }
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

// 后续的路由处理...

案例

假设你有一个 API 服务器托管在 https://api.example.com，并且你想让来自 https://myapp.com 的网页能够调用这个 API。

在 https://api.example.com 的服务器端，你需要设置响应头来允许来自 https://myapp.com 的跨域请求：

# 假设是 Python Flask 应用
from flask import Flask, make_response

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    response = make_response({"data": "Some data here"})
    response.headers['Access-Control-Allow-Origin'] = 'https://myapp.com'
    return response

这样配置后，https://myapp.com 上的网页就可以成功请求 https://api.example.com/api/data 的资源了。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-05-29，如有侵权请联系 cloudcommunity@tencent.com 删除

access