什么是跨域?

跨域是指浏览器在进行网络请求时,因请求的源(协议、域名、端口)与当前页面的源不同而受到的安全限制,这是浏览器基于同源策略(Same Origin Policy)实施的一种安全机制。以下将从其定义、产生原因、常见场景及解决方案等方面展开详细介绍:

一、跨域的定义与同源策略

1. 同源的定义

当两个URL的协议(protocol)、域名(domain)、端口(port) 完全相同时,才属于同一个源。例如:

  • 同源示例:http://example.com:80/pagehttp://example.com:80/api
  • 跨域示例:
    • 协议不同:http://example.comhttps://example.com
    • 域名不同:http://example.comhttp://test.com
    • 端口不同:http://example.com:80http://example.com:8080
2. 同源策略的目的

防止恶意网站通过脚本获取其他网站的敏感数据(如Cookie、LocalStorage、DOM信息等),避免用户信息泄露或被篡改。

二、跨域的常见场景

场景 示例(当前页面源为 http://a.com 跨域原因
不同域名 请求 http://b.com/data 域名不同
不同子域名 请求 http://sub.a.com/api 域名层级不同
域名与IP访问 请求 http://192.168.1.1/data 域名与IP不等效
端口号不同 请求 http://a.com:8080/api 端口不同
协议不同 请求 https://a.com/data 协议不同
CDN资源加载 加载 https://cdn.example.com/js/script.js 域名和协议可能不同
接口跨域调用 前端调用第三方API(如 https://api.github.com 域名完全不同

三、跨域的限制与表现

  1. AJAX请求限制
    浏览器会阻止跨域的AJAX请求(如通过XMLHttpRequestFetch),并在控制台抛出类似以下错误:

    Access to XMLHttpRequest at 'http://b.com/api' from origin 'http://a.com' 
    has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header 
    is present on the requested resource.
    
  2. DOM操作限制
    无法通过JS获取跨域页面的DOM元素(如iframe嵌套不同源的页面时,无法操作其内容)。

  3. Cookie与本地存储限制
    跨域请求默认不会携带当前页面的Cookie,除非服务器明确允许;本地存储(如LocalStorage)也无法跨域访问。

四、跨域的解决方案

1. CORS(跨域资源共享)—— 最常用方案
  • 原理:服务器通过响应头告知浏览器允许哪些源、方法、头字段等跨域请求。
  • 配置示例(服务端)
    # 以Flask为例
    from flask import Flask, request, jsonify
    from flask_cors import CORS
    
    app = Flask(__name__)
    CORS(app, origins="http://a.com", allow_headers="*", methods=["GET", "POST"])
    
    @app.route('/api/data', methods=['GET'])
    def get_data():
        return jsonify({"message": "跨域请求成功"})
    
  • 关键响应头
    • Access-Control-Allow-Origin:指定允许跨域的源(如http://a.com,或*表示允许所有源)。
    • Access-Control-Allow-Methods:允许的HTTP方法(如GETPOSTPUT)。
    • Access-Control-Allow-Headers:允许的请求头(如Content-TypeAuthorization)。
    • Access-Control-Allow-Credentials:是否允许携带Cookie(需与Origin配合,不能使用*)。
2. JSONP(JSON with Padding)—— 兼容旧浏览器
  • 原理:利用

你可能感兴趣的:(技术栈杂谈,跨域)