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，并将响应返回给客户端。