from origin 'null' has been blocked by cors policy

CORS（跨源资源共享）是一种安全机制，用于限制Web页面上的脚本对其他域的访问。当一个请求的来源（origin）与目标资源的来源不一致时，浏览器会根据CORS策略来决定是否允许该请求。

基础概念

CORS通过在HTTP头部添加特定的字段来实现跨域请求的控制。主要的HTTP头部字段包括：

Access-Control-Allow-Origin：指定允许访问资源的源。
Access-Control-Allow-Methods：指定允许的HTTP方法。
Access-Control-Allow-Headers：指定允许的请求头部字段。
Access-Control-Allow-Credentials：指定是否允许发送Cookie等凭证信息。

类型

CORS主要分为两种类型：

简单请求：满足特定条件的请求（如GET、POST方法，且HTTP头部字段有限）可以直接发送，浏览器会自动添加预检请求（OPTIONS）。
预检请求：对于不满足简单请求条件的请求，浏览器会先发送一个OPTIONS请求，询问服务器是否允许该请求。

应用场景

Web应用：当Web页面需要从不同的域获取资源时。
API服务：提供跨域访问的API服务。

问题原因

出现from origin 'null' has been blocked by CORS policy错误通常是因为：

请求的来源为空：这通常发生在本地文件系统（file://协议）上打开HTML文件时。
服务器未正确配置CORS：服务器没有设置允许跨域请求的头部字段。

解决方法

1. 修改请求来源

确保请求是从一个有效的HTTP服务器发出的，而不是直接从本地文件系统打开。

2. 服务器端配置CORS

在服务器端添加相应的CORS头部字段。以下是一些常见服务器端的配置示例：

Node.js (Express)

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  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 is running on port 3000');
});

Python (Flask)

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/data')
def get_data():
    response = jsonify({'message': 'This is data from the server.'})
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Authorization')
    return response

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

Java (Spring Boot)

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DataController {

    @CrossOrigin(origins = "*")
    @GetMapping("/data")
    public String getData() {
        return "{\"message\": \"This is data from the server.\"}";
    }
}