Access-Control-Allow-Origin设置“*”，为什么浏览器还有限制

Access-Control-Allow-Origin设置为"*"，意味着允许来自任何源的跨域请求。然而，尽管这个设置看起来很宽松，浏览器仍然会有一些安全限制，称为同源策略(Same-Origin Policy)。

同源策略是JavaScript的安全特性，它防止了一个页面从另一个不同源的资源（如域名、协议或端口）获取数据或执行脚本。即使服务器设置了 "*"，浏览器在实际执行时仍会对请求做检查：

1. XMLHttpRequest (XHR): 浏览器只允许发往指定来源的响应携带必要的CORS头信息（包括Access-Control-Allow-Origin），如果不符合，则会阻止请求。

2. Fetch API 或 JavaScript CORS 请求: 虽然Fetch API不会像XHR那样抛出错误，但它仍然会在后台应用相同的同源策略限制。

3. 安全沙箱限制: 对于某些敏感操作（比如cookies或本地存储），即使服务器设为 "*", 浏览器出于隐私保护原因仍可能会有所限制。

因此，虽然 "*": "*"看似无限制，但在实际开发中，为了确保安全性，通常推荐明确指定允许的源而不是使用通配符。

相关问题

我之前见到浏览器中的Access-Control-Allow-Origin:* 和Access-Control-Allow-Origin:localhost,同时出现会出现跨域问题吗?

Access-Control-Allow-Origin:* 表示允许所有来源访问，而 Access-Control-Allow-Origin:localhost 则表示只允许来自 localhost 的访问。如果同时出现这两个响应头，浏览器会优先使用 Access-Control-Allow-Origin:localhost，因为它更具体。如果你的请求来源不是 localhost，那么就会出现跨域问题。因此，如果你想允许所有来源访问，只需要设置 Access-Control-Allow-Origin:* 即可。

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type 我要把这些放到headers怎么写

如果你想在前端代码中将这些跨域响应头信息添加到请求头中，你可以这样写：

export const login = (username, password) => {
  const data = {
    username: username,
    password: password
  };
  
  const config = {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
      'Access-Control-Allow-Headers': 'Content-Type'
    }
  };

  return axios.post('http://localhost:3000/login', data, config);
};

在上面的代码中，我们将 `'Access-Control-Allow-Origin'`、`'Access-Control-Allow-Methods'` 和 `'Access-Control-Allow-Headers'` 添加到了请求头的配置对象 `config.headers` 中。

确保在调用 `login` 函数时，传递了正确的用户名和密码参数。

请注意，添加跨域响应头信息到请求头中只能解决前端代码发送请求时的跨域问题。如果后端服务器没有正确设置跨域响应头，仍然会导致跨域问题。请确保在后端服务器中设置了相应的跨域响应头，如之前提到的。

希望这能帮助到你！如有其他问题，请随时提问。