什么是跨域？——详解跨域问题及其解决方案

引言
什么是跨域
同源策略
跨域的产生原因
跨域的常见解决方案
- JSONP
- CORS
- 代理服务器
- nginx反向代理
- 后端设置允许跨域
CORS的详细实现
- 浏览器中的CORS支持
- 服务器端的CORS配置
常见的跨域场景和解决方案
- 跨域请求API
- 跨域加载资源
跨域的安全性考虑
跨域调试技巧
总结

引言

在现代Web开发中，前后端分离的架构设计已成为常态。然而，当前端向不同域名的后端服务器请求数据时，常会遇到跨域问题。理解并解决跨域问题，不仅能保证数据的正常交互，还能提升用户体验和应用的安全性。

什么是跨域

跨域（Cross-Origin）指的是浏览器阻止前端网页从一个域名（Origin）向另一个域名的服务器发送请求。具体来说，一个页面的协议、域名、端口三者任意一个与请求的目标地址不同，就被视为跨域请求。

举例说明：

http://example.com 请求 http://api.example.com 会跨域，因为域名不同。
http://example.com 请求 https://example.com 会跨域，因为协议不同。
http://example.com:8080 请求 http://example.com:9090 会跨域，因为端口不同。

同源策略

同源策略（Same-Origin Policy）是浏览器的一个重要安全机制，防止恶意网站通过跨域方式窃取敏感数据。该策略限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。

同源策略的定义：如果两个URL的协议、域名和端口都相同，则这两个URL具有相同的源。

同源策略的影响

同源策略影响以下几类数据访问：

Cookie、LocalStorage 和 IndexedDB
DOM 和 JavaScript 对象
AJAX 请求

跨域的产生原因

跨域问题主要是由于浏览器的同源策略所致。随着前后端分离架构的流行，前端开发常常需要向不同域名的后端服务器请求数据，从而产生跨域问题。

跨域的常见解决方案

JSONP

JSONP（JSON with Padding）是一种传统的跨域解决方案，通过动态创建<script>标签来实现跨域请求，因为<script>标签不受同源策略的限制。

实现原理

JSONP通过在URL中传递回调函数的名称，后端返回对应的JavaScript代码，前端执行该代码，从而实现数据的获取。

示例代码

前端代码：

<!DOCTYPE html>
<html>
<head>
    <title>JSONP Demo</title>
</head>
<body>
    <script>
        function handleResponse(data) {
            console.log('Received data:', data);
        }

        const script = document.createElement('script');
        script.src = 'http://example.com/api?callback=handleResponse';
        document.body.appendChild(script);
    </script>
</body>
</html>

后端代码（假设为Node.js）：

const http = require('http');

http.createServer((req, res) => {
    const callbackName = req.url.match(/callback=([^&]+)/)[1];
    const responseData = { message: 'Hello, world!' };
    res.writeHead(200, { 'Content-Type': 'application/javascript' });
    res.end(`${callbackName}(${JSON.stringify(responseData)})`);
}).listen(80, 'example.com');

CORS

CORS（Cross-Origin Resource Sharing）是现代解决跨域问题的标准方法，通过HTTP头来告诉浏览器，允许哪些跨域请求。

实现原理

CORS通过设置HTTP响应头Access-Control-Allow-Origin，告诉浏览器哪些域名可以访问资源。

示例代码

前端代码：

fetch('http://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

后端代码（假设为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-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

app.get('/data', (req, res) => {
    res.json({ message: 'Hello, world!' });
});

app.listen(80, 'example.com');

代理服务器

代理服务器可以绕过浏览器的同源策略，将跨域请求转发到目标服务器。

示例代码

前端代码：

fetch('/api/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

后端代码（假设为Node.js和Express）：

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

app.use('/api', (req, res) => {
    const url = 'http://api.example.com' + req.url;
    req.pipe(request(url)).pipe(res);
});

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

nginx反向代理

通过配置nginx反向代理，也可以实现跨域请求。

配置示例

server {
    listen 80;

    location /api/ {
        proxy_pass http://api.example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

后端设置允许跨域

通过在后端设置CORS响应头，允许特定域名访问资源。

示例代码

后端代码（假设为Spring Boot）：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://example.com")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

CORS的详细实现

浏览器中的CORS支持

CORS在浏览器中的实现是通过在请求和响应中添加相应的HTTP头部字段来完成的。常见的CORS相关头部字段包括：

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Expose-Headers

服务器端的CORS配置

不同的后端框架和服务器有不同的CORS配置方法。以下是一些常见的配置示例。

Node.js和Express

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

app.use(cors());

app.get('/data', (req, res) => {
    res.json({ message: 'Hello, world!' });
});

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

Spring Boot

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer

;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://example.com")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}