资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

JS跨域问题详解：原理、解决方案及实战案例

创作时间:

作者:

@小白创作中心

JS跨域问题详解：原理、解决方案及实战案例

引用

来源

https://docs.pingcode.com/baike/3608843

在前端开发中，跨域问题是一个常见的挑战。本文将详细介绍什么是跨域，以及如何通过JSONP、CORS和服务器代理等方法来解决跨域问题。

JS跨域是如何回事：跨域是指在浏览器中，由于同源策略的限制，网页从一个域请求资源到另一个域时会被阻止。同源策略是浏览器的安全机制，它规定了只有同一来源的页面才能共享资源，以防止恶意网站窃取用户数据。在实际开发中，常用的跨域解决方案包括：JSONP、CORS、服务器代理。本文将详细介绍这些方法及其应用场景。

一、什么是同源策略

同源策略（Same-Origin Policy）是浏览器的一项安全机制，用于防止不同源的网页之间互相访问数据，从而保护用户的隐私和安全。一个网页的源由协议、域名和端口三部分组成，只有当两个页面的这三部分都相同时，它们才被认为是同源的。

例如：

同源策略限制了以下三种行为：

Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求不能发送。

二、跨域解决方案

1、JSONP

JSONP（JSON with Padding）是一种通过script标签的src属性来实现跨域的技术。它利用了script标签不受同源策略限制的特点，允许网页从不同源加载数据。

使用步骤如下：

在客户端定义一个回调函数。
服务端返回的数据包含对这个回调函数的调用。
客户端接收到响应后，执行回调函数。

示例代码：

// 客户端代码
function handleResponse(response) {  
    console.log(response);  
}  
var script = document.createElement('script');  
script.src = 'http://www.example.com/data?callback=handleResponse';  
document.head.appendChild(script);

// 服务端代码（伪代码）
function getData(callback) {  
    var data = { "name": "example", "age": 30 };  
    return callback + '(' + JSON.stringify(data) + ')';  
}

优点：

简单易用，支持主流浏览器。
只需在服务端做少量修改。

缺点：

仅支持GET请求。
不够安全，容易受到XSS攻击。

2、CORS

CORS（Cross-Origin Resource Sharing）是一种跨域资源共享机制，允许服务器明确指定可以访问资源的域，从而实现跨域请求。它是目前最为推荐的跨域解决方案。

使用步骤如下：

在服务端设置响应头，允许特定的源进行跨域请求。

示例代码：

// 服务端代码（Node.js + Express）
const express = require('express');  
const app = express();  
app.use((req, res, next) => {  
    res.header('Access-Control-Allow-Origin', 'http://www.example.com');  
    res.header('Access-Control-Allow-Methods', 'GET, POST');  
    res.header('Access-Control-Allow-Headers', 'Content-Type');  
    next();  
});  
app.get('/data', (req, res) => {  
    res.json({ "name": "example", "age": 30 });  
});  
app.listen(3000, () => {  
    console.log('Server is running on port 3000');  
});

优点：

安全性高，可以指定允许的源、方法和头部。
支持所有类型的HTTP请求。

缺点：

需要服务端支持。
配置复杂，可能需要调整现有的服务端代码。

3、服务器代理

服务器代理是一种通过中间服务器转发请求的方式来实现跨域的技术。客户端向同源的服务器发送请求，服务器再将请求转发到目标服务器，并将响应返回给客户端。

使用步骤如下：

配置服务器，使其能够代理请求。
客户端发送请求到代理服务器。

示例代码：

// 客户端代码
fetch('/proxy/data')  
    .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('/proxy', (req, res) => {  
    const url = 'http://www.example.com' + req.url;  
    req.pipe(request(url)).pipe(res);  
});  
app.listen(3000, () => {  
    console.log('Proxy server is running on port 3000');  
});

优点：

可以完全控制请求和响应。
不需要修改目标服务器代码。

缺点：

增加了服务器的负担。
需要额外的服务器配置。

三、跨域请求的应用场景

1、前后端分离

在前后端分离的开发模式中，前端和后端通常部署在不同的域名下，导致跨域问题频繁出现。此时，可以使用CORS或服务器代理来解决跨域问题。

2、第三方API调用

当需要调用第三方API时，由于API服务器与前端服务器域名不同，也会遇到跨域问题。可以使用JSONP或CORS来解决。

3、微服务架构

在微服务架构中，不同的服务可能部署在不同的域名下，服务之间的调用也会涉及跨域问题。可以使用CORS或服务器代理来实现跨域访问。

四、跨域安全

1、CSRF攻击防范

跨域资源共享可能会带来CSRF（Cross-Site Request Forgery）攻击风险，攻击者通过伪造用户请求，冒充用户进行操作。可以通过以下方法防范：

使用CSRF Token：在请求中加入随机生成的Token，服务器验证Token的有效性。
验证来源：在服务端验证请求的来源，确保请求来自可信的域名。

2、XSS攻击防范

JSONP虽然简单易用，但容易受到XSS（Cross-Site Scripting）攻击。可以通过以下方法防范：

严格控制回调函数名：只允许特定的回调函数名，防止恶意代码注入。
使用CORS替代：尽量使用CORS来实现跨域请求，避免使用JSONP。

五、实际案例分析

1、案例一：使用CORS实现跨域请求

某电商网站前端和后端分离，前端部署在www.example.com，后端API部署在api.example.com。前端需要调用后端的商品列表接口。

解决方案：

在后端配置CORS，允许来自www.example.com的请求。
前端直接调用API。

后端代码（Node.js + Express）：

const express = require('express');
const app = express();  
app.use((req, res, next) => {  
    res.header('Access-Control-Allow-Origin', 'http://www.example.com');  
    res.header('Access-Control-Allow-Methods', 'GET, POST');  
    res.header('Access-Control-Allow-Headers', 'Content-Type');  
    next();  
});  
app.get('/products', (req, res) => {  
    res.json([{ "id": 1, "name": "Product A" }, { "id": 2, "name": "Product B" }]);  
});  
app.listen(3000, () => {  
    console.log('API server is running on port 3000');  
});

前端代码：

fetch('http://api.example.com/products')
    .then(response => response.json())  
    .then(data => console.log(data))  
    .catch(error => console.error('Error:', error));

2、案例二：使用服务器代理实现跨域请求

某博客网站需要调用第三方API获取文章列表，但由于同源策略限制，无法直接调用API。

解决方案：

在博客网站服务器配置代理，将请求转发到第三方API。
前端向代理服务器发送请求。

代理服务器代码（Node.js + Express）：

const express = require('express');
const request = require('request');  
const app = express();  
app.use('/proxy', (req, res) => {  
    const url = 'http://thirdparty.com' + req.url;  
    req.pipe(request(url)).pipe(res);  
});  
app.listen(3000, () => {  
    console.log('Proxy server is running on port 3000');  
});

前端代码：

fetch('/proxy/articles')
    .then(response => response.json())  
    .then(data => console.log(data))  
    .catch(error => console.error('Error:', error));

六、总结

跨域问题是前端开发中常见的问题，解决跨域问题的方法多种多样，包括JSONP、CORS和服务器代理等。选择合适的跨域方案可以提高开发效率和代码安全性。在实际项目中，还需要结合具体情况，考虑安全性和性能等因素，选择最适合的跨域解决方案。同时，使用合适的项目管理工具，如PingCode和Worktile，可以进一步提升团队协作效率。