SPA 应用中如何处理跨域问题-JavaScript中文网-JavaScript教程资源分享门户

单页应用 (Single Page Application，SPA) 是一种基于前端框架实现的应用程序架构，常常使用跨域请求获取数据或接口。然而，由于同源策略 (Same Origin Policy) 的限制，跨域请求会受到浏览器的限制。本文将介绍 SPA 应用中如何处理跨域请求的问题。

什么是跨域请求？

同源策略是浏览器最基本的安全策略之一，指的是不同源的 JavaScript 脚本无法访问彼此的资源。同源指的是协议、域名和端口号都相同，只有符合这三个条件的请求才能被浏览器接受。而跨域请求就是指在同一页面中发起的跨域请求，该请求将被浏览器拒绝。

解决跨域请求问题的方案

1. 代理服务器

代理服务器把客户端发起的请求转发给目标服务器，并将目标服务器的响应返回给客户端。代理服务器可以避免客户端直接访问目标服务器，从而解决跨域请求的问题。

具体实现可以使用 node.js 提供的 http-proxy 中间件，示例代码如下：

// javascriptcn.com 代码示例
const http = require("http");
const httpProxy = require("http-proxy");

const proxy = httpProxy.createProxyServer();

http.createServer((req, res) => {
  proxy.web(req, res, {
    target: "http://localhost:3000"
  });
}).listen(8080);

上述代码实现了将本地 8080 端口指向本地 3000 端口的代理。

2. 跨域资源共享 (CORS)

CORS 是一种跨域请求的机制，可以允许客户端跨越源访问服务器资源。CORS 需要服务器设置一组响应头来告诉浏览器是否允许跨域请求。

以下是一个使用 node.js 中的 cors 中间件实现 CORS 的示例代码：

// javascriptcn.com 代码示例
const express = require("express");
const cors = require("cors");

const app = express();

app.get("/api/posts", cors(), (req, res) => {
  res.json({
    data: [{
      title: "文章标题",
      content: "文章内容"
    }]
  });
});

app.listen(3000, () => {
  console.log("http://localhost:3000");
});

在上述示例中，通过调用 cors() 中间件，告诉客户端服务器允许跨域请求。

3. JSONP

JSONP (JSON with Padding) 是一种跨域请求的解决方案，它通过在客户端动态创建 script 标签的方式实现，在 script 标签的 src 属性中指定目标服务器的 URL，并指定一个回调函数的名称，服务端将响应内容以回调函数的方式返回给客户端。

以下是一个简单的 JSONP 实现代码：

// javascriptcn.com 代码示例
function jsonp(url, callback) {
  const callbackName = `jsonp_${Date.now()}`;
  window[callbackName] = function (data) {
    delete window[callbackName];
    document.body.removeChild(script);
    callback(data);
  };

  const script = document.createElement("script");
  script.src = url + `?callback=${callbackName}`;
  document.body.appendChild(script);
}

jsonp("http://localhost:3000/api/posts", function (data) {
  console.log(data);
});

在上述示例中，通过动态创建 script 标签的方式，传递回调函数名称，目标服务器将数据以回调函数的方式返回，并通过删除动态创建的 script 标签的方式清除回调函数。

总结

本文介绍了 SPA 应用中处理跨域请求的几种方式，包括代理服务器、CORS 和 JSONP。需要根据场景选择不同的解决方案，并结合服务器的实际情况进行调整。当然，如何隐藏代理服务器和处理跨域问题的细节是一个很大的话题，需要了解更多请自行查询相关资料。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6539c2137d4982a6eb33f4f0