获取API CORS - JavaScript

简介

CORS（Cross-Origin Resource Sharing）是一种使用额外HTTP头来告诉浏览器，当前网站有权访问其他源（网站）的资源。当浏览器遇到跨域请求时，如果没有CORS头，它就会拒绝请求。在JavaScript中获取API时，可能会涉及到跨域访问，所以需要使用CORS。

如何设置CORS

1. 服务器设置

如果你有自己的服务器，可以在服务器上设置CORS。服务器可以配置HTTP头Access-Control-Allow-Origin来控制哪些网站有权访问它的资源（这里的“访问”包括读取、修改等操作）。例如，如果你的API在http://api.example.com上，你可以设置下面的HTTP头：

Access-Control-Allow-Origin: http://example.com

这将允许http://example.com这个网站访问你的API。注意，Access-Control-Allow-Origin值不应该设置为*（即所有网站都有权访问），因为这将导致安全风险。

2. 代理设置

如果你没有服务器或者没有权限修改服务器配置，你可以使用代理。代理是一种Web服务器，它可以将请求发送到另一个服务器，并将响应返回给客户端。在JavaScript中获取API时，可以使用代理来绕过CORS限制。

fetch("/proxy?url=http://api.example.com")
  .then(response => response.json())
  .then(data => console.log(data));

上面的代码通过代理访问http://api.example.com，并将响应转换为JSON格式。使用代理时，需要在服务器上设置一个路由，以便客户端能够通过/proxy路径发送请求并接收代理响应。

3. npm安装cors解决跨域问题

现在通常用 npm 安装一个cors包解决cors问题。

安装cors包

npm install cors

引入和配置cors

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

结论

CORS允许Web开发人员在遵循同源策略的同时访问其他源的资源。在JavaScript中获取API时可能会涉及到跨域访问，需要使用CORS来授权访问。我们可以通过服务器配置、代理、npm安装cors包等方式实现CORS。