HTML5 – CORS

随着网络应用程序的不断发展，跨域资源共享（CORS）成为一种必不可少的技术。本文将讲解CORS及其在HTML5中的应用。

什么是CORS？

在传统的web应用中，浏览器限制了不同域之间的网络通信（安全限制）。在此情况下，如果你在一个域中有网页，而该网页需要从另一个域获取数据，那么浏览器会拒绝请求。这种情况就称为“跨域请求”。

为了解决这种情况，CORS诞生了。CORS是一种Web标准，允许浏览器向跨域服务器请求资源，并让服务器端允许特定域名的请求。

CORS的应用

假设你有一个web应用，你需要从另一个域获取资源不受限制。例如，你在http://example.com网站上有一个JavaScript文件，希望从另一个域http://api.example.com获取一些数据。可以使用CORS配置来实现。具体方法如下：

在服务端（http://api.example.com）中，设置响应头，允许特定域名的访问。一般使用如下PHP代码实现：

header("Access-Control-Allow-Origin: http://example.com");

通常，响应头包括以下参数：

Access-Control-Allow-Origin：该域名被允许访问该服务器。
Access-Control-Allow-Methods：该服务器允许的HTTP方法类型。
Access-Control-Max-Age：预处理请求的时间（以秒为单位）。
Access-Control-Allow-Headers：允许客户端传递的请求头。

在客户端（http://example.com）中，使用XMLHttpRequest对象发送跨域请求。代码如下：

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

上述代码中，withCredentials属性指示客户端在CORS请求中发送凭证，如：cookie、HTTP认证或OAuth token。如果要发送跨域cookies，则在服务端（http://api.example.com）响应头中添加Access-Control-Allow-Credentials: true。

一个完整的CORS例子

为了更好地理解CORS的应用，请看下面的例子。该例子基于Spring框架，其中http://localhost:8080为web应用，http://localhost:8081为RESTful服务。

服务端代码：

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public List<User> getUsers() {
        return userService.getUsers();
    }

    @PostMapping("/users")
    public ResponseEntity<Void> createUser(@RequestBody User user, UriComponentsBuilder builder) {
        userService.createUser(user);
        HttpHeaders headers = new HttpHeaders();
        headers.setLocation(builder.path("/users/{id}").buildAndExpand(user.getId()).toUri());
        return new ResponseEntity<>(headers, HttpStatus.CREATED);
    }
}

上述代码使用了Spring框架的@CrossOrigin注解，指出了web应用http://localhost:8080可以跨域访问RESTful服务。同时，也包含一个获取用户列表和添加用户的控制器。

客户端代码：

const getUsersBtn = document.querySelector('#get-users-btn');
const usersTable = document.querySelector('#users-table');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const createUserBtn = document.querySelector('#create-user-btn');

getUsersBtn.addEventListener('click', getUsers);
createUserBtn.addEventListener('click', createUser);

function getUsers() {
  fetch('http://localhost:8081/users')
    .then(response => response.json())
    .then(data => {
      let tableHtml = '<tr><th>ID</th><th>Name</th><th>Email</th></tr>';
      for (let user of data) {
        tableHtml += `<tr><td> ${user.id}</td><td>$ {user.name}</td><td>${user.email}</td></tr>`;
      }
      usersTable.innerHTML = tableHtml;
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

function createUser() {
  const user = {
    name: nameInput.value,
    email: emailInput.value
  };
  fetch('http://localhost:8081/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    })
    .then(response => {
      if (response.status === 201) {
        alert('User created successfully');
      } else {
        alert('Failed to create user');
      }
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

上述代码中，使用了fetch()方法发送了两个不同的请求：