blocked by cors policy: the 'access-control-allow-origin' header contains mu

CORS（跨源资源共享）是一种安全机制，用于限制Web页面中的脚本对其他域的访问。当你尝试从一个域（源）向另一个域发送请求时，浏览器会检查响应头中的Access-Control-Allow-Origin字段，以确定是否允许这种跨域请求。

基础概念

同源策略：浏览器的一种安全功能，限制了一个源的文档或脚本如何与另一个源的资源进行交互。
CORS：一种机制，它使用额外的HTTP头来告诉浏览器，允许Web应用从不同的源访问选定的资源。

类型

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

应用场景

API服务：当你的前端应用需要调用不同域的后端服务时。
静态资源分发：通过CDN分发静态资源，而这些资源可能需要跨域访问。

常见问题及原因

你遇到的问题blocked by CORS policy: the 'access-control-allow-origin' header contains mu表明服务器响应中的Access-Control-Allow-Origin头可能设置不正确。这通常是因为服务器没有正确配置CORS策略，或者配置的值不允许你的源访问资源。

解决方法

后端配置

确保服务器响应包含正确的Access-Control-Allow-Origin头。以下是一些常见后端语言的示例：

Node.js (Express)

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 或者指定具体的源，如 'http://example.com'
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  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'));

Python (Flask)

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/data', methods=['GET'])
def get_data():
    response = jsonify({'message': 'This is data from the server.'})
    response.headers.add('Access-Control-Allow-Origin', '*') # 或者指定具体的源
    return response

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