跨域调用 JavaScript 的几种方法包括：CORS（跨域资源共享）、JSONP（JSON with Padding）、使用服务器端代理、通过HTML5的postMessage接口。其中，CORS 是最常用且推荐的方法，因为它是现代浏览器支持的标准。CORS（跨域资源共享）允许服务器声明哪些源站有权访问哪些资源，确保安全性。下面详细介绍 CORS 的实现。
一、CORS（跨域资源共享）
CORS（跨域资源共享）是最常用且推荐的跨域方法，因为它是现代浏览器支持的标准。CORS 允许服务器声明哪些源站有权访问哪些资源，确保安全性。实现 CORS 通常需要在服务器端配置响应头。
1. 配置服务器响应头
通过配置服务器的响应头，允许某些域名的请求跨域访问资源。以下是一些常见服务器的配置示例：
Apache
在 .htaccess 文件中添加以下内容：
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
Header set Access-Control-Allow-Headers "Content-Type"
Nginx
在服务器配置文件中添加以下内容：
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
Node.js（Express框架）
在中间件中添加CORS支持：
const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors({
origin: '*',
methods: ['GET', 'POST', 'OPTIONS', 'DELETE', 'PUT'],
allowedHeaders: ['Content-Type']
}));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2. 处理预检请求
当使用复杂请求（例如带有自定义头部的请求）时，浏览器会先发送一个 OPTIONS 请求来进行预检。这时，服务器需要正确响应预检请求。
Node.js（Express框架）
app.options('*', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, DELETE, PUT');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.send();
});
二、JSONP（JSON with Padding）
JSONP 是一种传统的跨域请求方法，主要用于 GET 请求。它通过 <script> 标签加载带有回调函数的 JSON 数据来实现跨域。
1. 创建 JSONP 请求
在客户端，创建一个 <script> 标签，并将其 src 属性设置为目标 URL：
function fetchJsonp(url, callbackName) {
const script = document.createElement('script');
script.src = `${url}?callback=${callbackName}`;
document.body.appendChild(script);
}
function handleResponse(data) {
console.log(data);
}
fetchJsonp('https://example.com/data', 'handleResponse');
2. 服务器端返回 JSONP 数据
服务器端需要返回一个带有回调函数的 JSON 数据。例如，在 Node.js 中：
const express = require('express');
const app = express();
app.get('/data', (req, res) => {
const callbackName = req.query.callback;
const data = { message: 'Hello, World!' };
res.send(`${callbackName}(${JSON.stringify(data)})`);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
三、使用服务器端代理
通过在服务器端设置代理，将跨域请求转发到目标服务器。这种方法不需要修改客户端代码，只需在服务器端配置代理。
1. 配置代理服务器
Node.js（Express框架）
使用 http-proxy-middleware 库：
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api', createProxyMiddleware({
target: 'https://example.com',
changeOrigin: true,
pathRewrite: {
'^/api': '', // 重写路径
},
}));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2. 使用代理请求数据
在客户端，通过代理服务器请求数据：
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
四、HTML5的postMessage接口
postMessage 是 HTML5 提供的一种跨域通信方式，通常用于不同窗口或 iframe 之间的消息传递。
1. 父窗口发送消息
在父窗口中，通过 postMessage 向子窗口发送消息：
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', 'https://example.com');
2. 子窗口接收消息
在子窗口中，通过 message 事件监听消息：
window.addEventListener('message', (event) => {
if (event.origin !== 'https://example.com') {
return;
}
console.log('Message received:', event.data);
});
3. 子窗口发送消息
在子窗口中，通过 postMessage 向父窗口发送消息：
window.parent.postMessage('Hello from iframe!', '*');
4. 父窗口接收消息
在父窗口中，通过 message 事件监听消息：
window.addEventListener('message', (event) => {
if (event.origin !== 'https://example.com') {
return;
}
console.log('Message received:', event.data);
});
五、总结
跨域调用 JavaScript 是一个常见的需求，主要方法包括 CORS、JSONP、使用服务器端代理和 HTML5 的 postMessage 接口。CORS 是最常用且推荐的方法，因为它是现代浏览器支持的标准，能够确保安全性。JSONP 适用于简单的 GET 请求，但不支持其他 HTTP 方法。使用服务器端代理是一种灵活的方法，可以在服务器端轻松配置。HTML5 的 postMessage 接口适用于不同窗口或 iframe 之间的消息传递。
推荐使用研发项目管理系统 PingCode 和通用项目协作软件 Worktile 来管理项目团队和任务，可以提高协作效率和项目管理质量。
相关问答FAQs：
1. 为什么我在跨域调用JavaScript时遇到了问题？
跨域调用JavaScript时会遇到问题是因为浏览器的同源策略限制了不同源（协议、域名、端口）之间的JavaScript交互。这是出于安全考虑，以防止恶意网站获取用户的敏感信息。
2. 我可以通过哪些方法实现跨域调用JavaScript？
有几种方法可以实现跨域调用JavaScript。常见的方法包括使用JSONP（JSON with Padding）、CORS（跨域资源共享）和代理服务器等。JSONP利用<script>标签不受同源策略的限制，通过动态创建<script>标签来加载跨域的JavaScript文件。CORS则是在服务器端设置响应头，允许其他域名的请求访问资源。代理服务器是将跨域请求发送到同源的代理服务器，由代理服务器转发请求到目标服务器。
3. 如何使用JSONP进行跨域调用JavaScript？
要使用JSONP进行跨域调用JavaScript，需要在目标服务器上创建一个JavaScript函数，该函数将返回一个带有回调函数参数的JSON数据。然后，在调用该跨域的JavaScript时，将回调函数作为参数传递给目标服务器的URL。目标服务器返回的JavaScript文件会调用该回调函数，并将JSON数据作为参数传递给回调函数，从而实现跨域调用。
注意：使用JSONP时要确保目标服务器信任传递的回调函数，以防止跨站脚本攻击（XSS）。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3518564
