解决 Angular 应用中访问 API 出现的 CORS 跨域问题-JavaScript中文网-JavaScript教程资源分享门户

什么是 CORS？

CORS，即跨源资源共享（Cross-origin Resource Sharing）。当一个网站向另外一个网站发送请求时，浏览器会出于安全考虑保护用户数据，拒绝跨域请求。CORS 机制允许一个网站开放访问授权，使得其他网站的客户端能够以安全的方式与它进行交互。

CORS 如何影响前端应用？

在前端应用中，如果向不同域的 API 发送 HTTP 请求，由于浏览器的同源策略（Same Origin Policy），请求将会被浏览器拒绝，导致请求失败。

考虑到大多数前端应用都需要与远程 API 进行交互，CORS 就成为了一项重要的技术挑战。本文将提供一些可行的解决方案。

解决方案

服务器端跨域访问

最常见的解决方案是在服务器端进行跨域访问。在服务器端创建一个跨域访问的代理，然后将客户端的请求路由到代理服务器。该方法需要服务器端进行配置，但客户端代码的改动会比较小。

可以借助 Express.js 搭建一个简单的代理服务器。以下是示例代码：

// javascriptcn.com 代码示例
const express = require('express');
const request = require('request');

const app = express();
const port = 3000;

app.use(express.static('public'));

app.use('/api', (req, res) => {
  const url = 'http://example.com' + req.url;
  req.pipe(request(url)).pipe(res);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

在上述示例中，我们通过 Express.js 搭建了一个代理服务器，将 /api 路由的请求路由到 http://example.com 域名下。客户端访问 /api，代理服务器会将请求通过 request() 方法转发到目标域名的服务端，并将请求的结果返回给客户端。

JSONP

JSONP 应该算是历史上最流行的跨域请求解决方案。它利用了 HTML <script> 标签可以跨域加载资源的特性，实现跨域请求。

在实践中，使用 JSONP 发起跨域请求时，需要在服务器端返回一个包含客户端函数名的 JSON 对象，客户端需要在回调函数中处理服务器返回的数据。

以下是一个使用 JSONP 请求 Flickr API 的示例代码：

// javascriptcn.com 代码示例
function search(keyword, callback) {
  const url = `https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=${encodeURIComponent(keyword)}&jsoncallback=jsonFlickrFeed`;
  window.jsonFlickrFeed = function(data) {
    callback(data.items);
  };
  const script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}

在上述代码中，我们定义一个 search 函数，用于向 Flickr API 发送请求。在请求中，我们利用了 JSONP 的特性，请求的 URL 中包含了客户端函数的名称 jsonFlickrFeed。在客户端执行结果函数中，我们将结果数据传递给回调函数。

设置请求头

在以上解决方案不可行时，我们可以在客户端设置请求头以绕过 CORS。使用 XMLHttpRequest 对象发送请求时，我们可以通过设置 Access-Control-Allow-Origin 头来实现跨域请求。

以下是一个使用 XMLHttpRequest 请求 Flickr API 的示例代码：

// javascriptcn.com 代码示例
function search(keyword, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=${encodeURIComponent(keyword)}`);
  xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText.match(/^\w+\(({.+})\)$/)[1]).items;
      callback(data);
    }
  };
  xhr.send();
}

在上述示例中，我们使用 XMLHttpRequest 对象发送 GET 请求，并在请求头中设置 Access-Control-Allow-Origin 头为 *。在回调函数中，我们将响应文本解析为 JSON 对象，并将结果数据传递给回调函数。

总结

本文介绍了通过服务器端跨域访问、JSONP 和设置请求头三种方式解决 Angular 应用中访问 API 出现的 CORS 跨域问题。在实践中，应该优先考虑第一种解决方案，因为它不需要对客户端代码进行改动。但在其他地方，例如需要和第三方 API 进行交互时，我们可以使用其他两种解决方案。

希望本文对读者在实际开发中遇到的 CORS 跨域问题有所帮助。

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