JavaScript跨域請求如何設置

在 JavaScript 中，跨域請求可以通過以下幾種方式實現：

1. JSONP（JSON with Padding）

JSONP 是一種通過動態創建 <script> 標簽來實現跨域請求的方法。它的基本思想是利用瀏覽器允許跨域引用 JavaScript 腳本的特性，將請求數據包裹在一個回調函數中，并通過 <script> 標簽的 src 屬性將數據傳遞給父頁面。

function jsonpCallback(data) {
  console.log("收到數據：", data);
}

const script = document.createElement("script");
script.src = "https://example.com/data?callback=jsonpCallback";
document.body.appendChild(script);

服務器端需要將數據包裹在 jsonpCallback 函數中，并設置 Content-Type 為 application/javascript。

2. CORS（跨域資源共享）

CORS 是一種更為現代的跨域解決方案，它允許服務器通過設置響應頭來指定哪些源可以訪問其資源。要使用 CORS，需要在服務器端配置允許跨域請求的響應頭。

例如，在 Node.js 的 Express 框架中，可以使用以下代碼配置 CORS：

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();
});

// 其他路由和中間件

3. 使用代理服務器

如果你無法修改服務器端的配置，可以考慮使用代理服務器來實現跨域請求。代理服務器可以接收客戶端的請求，然后將請求轉發給目標服務器，并將響應返回給客戶端。這樣，客戶端就可以繞過瀏覽器的跨域限制。

例如，在 Node.js 中，可以使用 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": "",
  },
}));

// 其他路由和中間件

這樣，當客戶端向 /api 發送請求時，代理服務器會將請求轉發給 https://example.com，并將響應返回給客戶端。