如何使用 cros - Javascript

CORS (跨源资源共享) 是一种机制，可以让网页向不同域名的服务器请求数据。这种技术通常用于客户端（如浏览器）通过 XMLHttpRequest 向服务器请求数据。但是，在默认情况下，Javascript 只允许请求同一域名下的数据。这是由于浏览器的同源策略所引起的。

Javascript 提供了一种使用 CORS 的方法，可以让客户端请求来自不同域名的数据。本文将介绍如何使用 Javascript 实现跨域请求。

前置条件

在使用 CORS 之前，我们需要了解几个基本概念。

跨域请求

跨域请求是指在传输协议、域名或端口号不同的情况下，浏览器向服务器发送 HTTP 请求。例如，在地址为 https://www.example.com 的页面上，向 https://www.example.net 发送请求，就是跨域请求。

同源策略

同源策略是指浏览器的一种安全机制，它防止 Javascript 代码从一个源加载的网页去读取另一个源加载的网页中的数据。同源策略的基本思想是，只有同一域名、端口号和协议的页面之间才能相互访问。

CORS

CORS 是一种跨域资源共享的技术，它允许客户端在与另一个域名交互时，调用一些特定的 HTTP 头信息，以实现跨域访问。它需要服务器支持，在请求和响应中都会涉及到 CORS 相关的 HTTP 请求头。

使用方法

下面是使用 CORS 的一些常用方法，包括基本跨域请求、预检请求和带认证信息的请求。

基本跨域请求

基本跨域请求是指客户端通过 XMLHttpRequest 对服务器进行非简单请求（例如 PUT 或 DELETE ）时，需要预先发送一个 OPTIONS 请求，以确定是否允许这个请求。客户端发出这个请求，服务器会返回一个包含 CORS 头信息的 200 正常响应，告诉客户端是否允许该请求。

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.open('PUT', 'http://example.com/cors')
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader('Authorization', 'Bearer <access_token>')
xhr.send(JSON.stringify({foo: 'bar'}))

在以上代码中，我们使用 XMLHttpRequest 向 http://example.com/cors 发送了一个 PUT 请求。在请求头中，我们设置了 Content-Type 和 Authorization 两个字段。此外，服务器还需要设置与此相应的 CORS 头信息。

预检请求

有些跨域请求（如 POST 请求的 Content-Type 为 application/json 时）需要客户端先发送一个预检请求，以验证服务器是否允许此类请求。对于预检请求，服务器需要返回一个 200 响应，其中要包含 CORS 头信息，以及指定了允许请求的域名。

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.open('POST', 'http://example.com/cors')
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader('Authorization', 'Bearer <access_token>')
xhr.setRequestHeader('X-Custom-Header', 'value')
xhr.send(JSON.stringify({foo: 'bar'}))

带认证信息的请求

在上面的两个例子中，我们都在请求头中添加了 Authorization 字段来传递认证信息。但是，如果客户端试图在没有凭证的情况下发送此类请求，服务器会拒绝请求。在这种情况下，我们可以通过将 xhr.withCredentials 设置为 true 来告诉浏览器，此请求需要带上凭证信息。

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

在以上代码中，我们将 xhr.withCredentials 设置为 true ，告诉浏览器该请求需要带上凭证信息。

总结

以上就是使用 Javascript 实现 CORS 跨域访问的一些方法。通过使用 CORS，我们可以在不同的域名之间实现数据交互，为客户端开发带来更多的可能性。