如何解决 CORS 问题：跨域请求的终极指南

2024-03-20 16:10:24

跨域资源共享（CORS）问题在现代Web开发中相当常见。作为一名经验丰富的开发者，我经常遇到这个问题，它会导致浏览器阻止不同域之间的请求。本文将详细介绍CORS的概念、常见问题及其解决方案。

CORS 是什么？

CORS 是一种浏览器安全机制，用于限制浏览器向不同域的服务器发送请求。这种限制旨在防止恶意网站访问敏感数据或执行未经授权的操作。

CORS 问题

当应用程序尝试向与请求源不同的域上的服务器发送请求时，就会发生 CORS 问题。通常，浏览器会显示类似以下的错误信息：

Access to XMLHttpRequest at 'https://example.com/api/data' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决 CORS 问题的步骤

解决 CORS 问题通常涉及服务器端和客户端的配置。以下是详细的步骤和示例代码。

1. 服务器端配置

在服务器端，需要配置应用程序以允许跨域请求。以下是一些常见的服务器端配置示例。

Nginx 服务器配置

对于使用 Nginx 的应用程序，可以在服务器块中添加以下配置：

location / {
    if ($request_method ~* "(GET|POST)") {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET, POST;
        add_header Access-Control-Allow-Headers Authorization, Content-Type;
    }
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET, POST;
        add_header Access-Control-Allow-Headers Authorization, Content-Type;
        return 200;
    }
}

Laravel 服务器配置

在 Laravel 中，可以使用 config/cors.php 配置文件来指定允许的原点、方法和标头：

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

2. 客户端配置

在客户端，需要在 fetch 请求中设置适当的标头，以确保请求能够通过 CORS 检查。

前端 JavaScript 代码

以下是一个示例 fetch 请求：

var data = {
    username: document.querySelector('#email').value,
    password: document.querySelector('#password').value
};

fetch("http://userauthapi.local/api/login", {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
        "Content-Type": "application/json"
    }
})
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })
    .catch((data) => {
        console.error("Error: ", data.message);
    });