使用 Fetch API 解决 SPA 跨域问题-JavaScript中文网-JavaScript教程资源分享门户

随着单页应用（SPA）在前端领域的流行，跨域问题也愈发常见。本文将介绍 Fetch API 并借助此 API 来解决 SPA 跨域请求问题。

Fetch API 简介

Fetch API 是由 WHATWG（Web Hypertext Application Technology Working Group）规定并由浏览器实现的 Web API，用于代替 XMLHttpRequest（XHR）发送网络请求。Fetch API 提供了更加简单和强大的方式来处理网络请求。

Fetch API 的基本使用方式如下：

// javascriptcn.com 代码示例
fetch(url)
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上述代码中，fetch 函数发送一个 GET 请求，并返回一个 Promise 对象。在 then 回调函数中，我们可以使用 response.json() 方法来将响应内容解析为 JSON 格式的数据。最后在 catch 回调函数中，我们可以处理请求异常情况。

跨域问题

同源策略是浏览器的一个安全策略，它限制了一个页面中的脚本仅能与来自同一来源的资源进行交互。不同源之间的资源请求通常会被浏览器阻止，除非响应头设置了 CORS 跨域资源共享。

由于单页应用使用 JavaScript 动态生成 HTML，因此它属于跨域资源请求的一种典型场景。在 SPA 跨域请求时，由于浏览器的同源策略，我们需要设置响应头的如下几个字段：

Access-Control-Allow-Origin - 允许访问的源
Access-Control-Allow-Methods - 允许使用的请求方法
Access-Control-Allow-Headers - 允许使用的头部信息
Access-Control-Allow-Credentials - 是否允许发送 Cookie 等用户凭证信息

使用 Fetch API 显式请求 CORS

在 Fetch API 中，我们通过设置一个 Request 对象作为第一个参数来显式地创建一个跨域请求。

// javascriptcn.com 代码示例
const url = 'https://api.example.com/data.json';
const options = {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Allow-Headers': '*'
  }
};

fetch(new Request(url, options))
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

可以看到，我们在 options 中添加了 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 等跨域请求头字段。通过显式创建 Request 对象并传入 options 可以让 Fetch API 发送跨域请求。

使用 CORS 代理请求

除了显式设置跨域请求头，我们还可以使用 CORS 代理的方式通过后端服务器转发请求。

以下代码示例使用 Node.js 中间件 http-proxy-middleware 进行反向代理。

// javascriptcn.com 代码示例
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// 跨域请求转发
app.use(
  '/api',
  createProxyMiddleware({
    target: 'https://api.example.com',
    changeOrigin: true,
    pathRewrite: {
      "^/api": "/"
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
      'Access-Control-Allow-Headers': 'Content-Type,Authorization'
    }
  })
);

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

上述代码中，我们使用 http-proxy-middleware 中间件反向代理 /api 路径，将跨域请求转发到 https://api.example.com 地址。并且我们在响应头中添加了 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 等字段，以处理跨域请求。

最后，我们可以在前端代码中使用 Fetch API 访问该代理服务器：

// javascriptcn.com 代码示例
fetch('http://localhost:3000/api/data.json')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

总结

在本文中，我们介绍了 Fetch API 并使用它显式请求 CORS 和使用 CORS 代理的方式解决 SPA 跨域问题。希望本文中的内容对大家有所帮助。

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