JavaScript跨域請求如何運用

在JavaScript中，跨域請求是指在客戶端向不同域名的服務器發送HTTP請求。由于瀏覽器的同源策略限制，默認情況下不允許跨域請求。但是，有一些方法可以實現跨域請求，例如使用JSONP、CORS（跨域資源共享）或者代理服務器。

JSONP（JSON with Padding）： JSONP是一種跨域數據交互的方法，它利用了<script>標簽的src屬性不受同源策略限制的特點。JSONP請求實際上是動態添加一個<script>標簽，將請求的URL作為src屬性的值。服務器返回的數據需要包裹在一個函數調用中，客戶端需要提前定義好這個函數。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP Example</title>
    <script>
        function handleResponse(data) {
            console.log(data);
        }
    </script>
    <script src="http://example.com/api?callback=handleResponse"></script>
</head>
<body>
</body>
</html>

CORS（跨域資源共享）： CORS是一種更為現代的跨域解決方案，它允許服務器通過設置響應頭來指定哪些源（域名、協議和端口）可以訪問其資源。要使用CORS，服務器需要配置相應的響應頭，例如Access-Control-Allow-Origin。

客戶端可以使用XMLHttpRequest或Fetch API發起CORS請求。以下是一個使用Fetch API的示例：

fetch('http://example.com/api', {
    method: 'GET',
    mode: 'cors',
    credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

代理服務器：代理服務器是一種在客戶端和服務器之間充當中轉的服務器，它可以幫助實現跨域請求。客戶端發送請求到代理服務器，代理服務器再將請求轉發到目標服務器，然后將響應返回給客戶端。這樣就繞過了瀏覽器的同源策略限制。

示例（使用Node.js和Express搭建的簡單代理服務器）：

const express = require('express');
const fetch = require('node-fetch');
const cors = require('cors');
const app = express();
const port = 3000;

app.use(cors());

app.use('/api', (req, res) => {
    const url = 'http://example.com/api' + req.originalUrl;
    req.pipe(fetch(url)).then(response => response.text()).then(data => res.send(data));
});

app.listen(port, () => {
    console.log(`Proxy server listening at http://localhost:${port}`);
});

客戶端請求代理服務器的API，代理服務器再將請求轉發到目標服務器，從而實現跨域請求。

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

最新問答

相關標簽