解决跨域请求问题，实现前后端分离的 RESTful API 架构-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们通常会遇到跨域请求的问题。跨域请求是指在当前页面中，向不同域名、不同端口、不同协议的服务器发送请求。由于浏览器的同源策略，跨域请求会被禁止，导致请求失败。

为了解决跨域请求问题，我们可以采用一些技术手段，比如 JSONP、CORS 等。同时，为了实现前后端分离的架构，我们可以使用 RESTful API，将前后端分离开发，提高开发效率和系统可维护性。

本文将介绍如何解决跨域请求问题，并实现前后端分离的 RESTful API 架构，希望对前端开发者有所帮助。

解决跨域请求问题

JSONP

JSONP（JSON with Padding）是一种跨域请求的解决方案。它利用了浏览器允许跨域请求加载 JavaScript 的特性，通过动态创建 script 标签，向服务器发送请求，并在响应中返回一段 JavaScript 代码。这段代码会被浏览器自动执行，从而实现跨域请求。

以下是一个 JSONP 的示例代码：

// javascriptcn.com 代码示例
function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);

  window[callback] = function(data) {
    document.body.removeChild(script);
    delete window[callback];
    callback(data);
  };
}

jsonp('http://example.com/api?callback=handleData', function(data) {
  console.log(data);
});

function handleData(data) {
  console.log(data);
}

上述代码中，我们定义了一个 jsonp 函数，接受一个 url 和一个 callback 参数。在函数中，我们创建了一个 script 标签，将 url 赋值给它的 src 属性，并将它添加到页面中。同时，我们定义了一个全局的 callback 函数，用于处理服务器返回的数据。在 script 加载完成后，服务器会返回一段 JavaScript 代码，其中调用了我们定义的 callback 函数，并将数据作为参数传入。浏览器会自动执行这段代码，从而触发我们定义的 callback 函数，并将数据作为参数传入。

CORS

CORS（Cross-Origin Resource Sharing）是一种跨域请求的标准解决方案。它利用了浏览器发送跨域请求时自动发送的 Origin 头信息，服务器可以根据这个头信息判断是否允许该请求。如果允许，服务器会在响应头中添加 Access-Control-Allow-Origin 头信息，告诉浏览器允许该请求。

以下是一个 CORS 的示例代码：

// javascriptcn.com 代码示例
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

上述代码中，我们创建了一个 XMLHttpRequest 对象，向服务器发送 GET 请求。在发送请求前，我们将 withCredentials 属性设置为 true，表示发送跨域请求时携带 Cookie。在响应返回后，我们判断请求状态是否为 200，如果是，就打印响应内容。

实现前后端分离的 RESTful API 架构

RESTful API 是一种基于 HTTP 协议设计的 API 架构，它将资源和操作都映射为 URL 和 HTTP 方法，通过 HTTP 协议进行通信。RESTful API 的设计思想简单明了，易于理解和实现，因此得到了广泛的应用。同时，RESTful API 可以实现前后端分离的开发模式，提高开发效率和系统可维护性。

以下是一个简单的 RESTful API 的示例代码：

// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

let todos = [
  { id: 1, text: 'Learn JavaScript', completed: false },
  { id: 2, text: 'Learn React', completed: false },
  { id: 3, text: 'Build a web app', completed: false },
];

app.get('/todos', function(req, res) {
  res.json(todos);
});

app.post('/todos', function(req, res) {
  const todo = req.body;
  todo.id = todos.length + 1;
  todos.push(todo);
  res.json(todo);
});

app.put('/todos/:id', function(req, res) {
  const id = parseInt(req.params.id, 10);
  const todo = todos.find(todo => todo.id === id);
  if (todo) {
    Object.assign(todo, req.body);
    res.json(todo);
  } else {
    res.status(404).end();
  }
});

app.delete('/todos/:id', function(req, res) {
  const id = parseInt(req.params.id, 10);
  const index = todos.findIndex(todo => todo.id === id);
  if (index !== -1) {
    todos.splice(index, 1);
    res.status(204).end();
  } else {
    res.status(404).end();
  }
});

app.listen(3000, function() {
  console.log('Server is running on port 3000');
});

上述代码中，我们使用了 Express 框架，创建了一个 RESTful API。我们定义了四个路由：GET /todos、POST /todos、PUT /todos/:id 和 DELETE /todos/:id。分别用于获取所有任务、创建任务、更新任务和删除任务。在处理请求时，我们使用了 req 和 res 参数，分别表示请求和响应的对象。在 POST 和 PUT 请求中，我们使用了 body-parser 中间件，将请求体解析为 JSON 对象。

总结

本文介绍了如何解决跨域请求问题，并实现前后端分离的 RESTful API 架构。我们了解了 JSONP 和 CORS 两种跨域请求的解决方案，以及如何使用 Express 框架创建一个简单的 RESTful API。希望本文对前端开发者有所帮助，能够提高开发效率和系统可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650a1a3795b1f8cacd483f38