< p >在前端開發中，我們經常需要調用跨域的API，例如前端頁面需要調用后端的數據接口，但是很多時候我們會遇到“跨域”這個問題。那么什么是跨域呢？

< p >簡單來講，當網頁的協議、域名、端口號與Javascript請求的地址不一致時，就會發生跨域問題。這個時候瀏覽器會禁止頁面對不同域名的數據進行跨域請求，為了保證網站的安全性。

< p >如下示例：

<code>
//當前訪問頁面為： http://www.example.com/index.html
$.ajax({
url: 'http://www.baidu.com/api/getData',
success: function (data) {
console.log(data)
}
});
</code>

< p >上述代碼中，ajax請求的地址為百度的數據接口，但是協議、域名、端口號都與訪問頁面的地址不一致，因此會發生跨域問題。

< p >那么如何解決跨域問題呢？

< p >以下是一些常見的解決方法:

< p >1. 使用Jsonp

< p >JSONP(JSON with Padding) 是 JSON 的一種“使用模式”，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

<code>
//jsonp請求示例代碼：
function handleData(data) {
console.log(data)
}
var script = document.createElement('script')
script.src = 'http://www.baidu.com/api/getData?callback=handleData'
document.body.appendChild(script)
</code>

< p >上述代碼中使用了script標簽，通過src屬性引用了請求地址，并在URL后加了個參數callback，而這個參數的值是一個函數名，該函數會被jsonp服務端調用，jsonp服務器會將數據作為該函數的參數進行傳遞。

< p >2. 使用CORS

< p >CORS(Cross-Origin Resource Sharing)是一種機制，允許瀏覽器向跨域的服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

<code>
//后端示例代碼（Node.js）：
const express = require('express')
const app = express()
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
next();
});
app.get('/api/getData', (req, res) => {
res.json({
data: 'Hello World'
})
})
app.listen(3000, () => {
console.log('Server listening on http://localhost:3000')
})
</code>

<code>
//前端示例代碼：
$.ajax({
url: 'http://localhost:3000/api/getData',
type: 'GET',
dataType: 'json',
success: function (data) {
console.log(data)
}
})
</code>

< p >CORS機制允許設置response的header信息，使得瀏覽器不再認為這是跨域請求，而是允許跨域調用。因此只要后端在response中設置Access-Control-Allow-Origin即可。

< p >3. 使用proxy代理

< p >將請求發送到同源的服務器，由同源服務器發出請求，然后將結果返回。這種方式不需要對服務器端進行任何設置。

<code>
//前端示例代碼：
$.ajax({
url: '/api/getData',
type: 'GET',
dataType: 'json',
success: function (data) {
console.log(data)
}
})
</code>

<code>
//后端示例代碼（Node.js）：
const express = require('express')
const app = express()
const request = require('request');
app.get('/api/getData', (req, res) => {
request('http://www.baidu.com/api/getData', function (error, response, body) {
if (!error && response.statusCode == 200) {
res.json({
data: body
})
}
});
})
app.listen(3000, () => {
console.log('Server listening on http://localhost:3000')
})
</code>

< p >上述示例中，前端的ajax請求地址為同源服務器地址（例如 http://localhost:3000），然后在后臺使用request模塊將請求發送到外部API地址（例如 http://www.baidu.com/api/getData），最終向前端返回外部API的數據。

< p >總結：通過上述三種跨域調用操作方法，我們可以解決大部分跨域問題，在實際開發中要根據實際需求來選擇相應的跨域方式。