当前位置：首页 > news >正文

浏览器同源策略、跨域、跨域请求，服务器处理没、跨域解决方案

news 2025/7/24 11:59:16

什么是同源策略

概念：
同源策略是浏览器的一种安全机制，用于防止恶意网站对用户的敏感数据进行未经授权的访问。它限制了从一个源加载的脚本对另一个源的资源进行访问。简单来说，同源策略规定只有当两个页面的协议、域名和端口都相同时，它们才属于同一个源，允许相互访问资源。

好处：

保护用户数据安全，不同源的脚本无法访问另一个源的Cookie、LocalStorage、SessionStorage
不同源的脚本无法读取或操作另一个源的Dom
跨源的XMLHttpRequest或Fetch请求会被浏览器阻止，除非目标服务器允许（使用CORS）

什么是跨域

当一个网页试图访问不同来源的资源（如API、图片、脚本、数据等），就会发生跨域，常说的跨域指的是ajax调用接口时的跨域，浏览器会根据同源策略来判断来源是否一致，如果不一致就认为是跨域请求。如果服务器没有做一些配置，那么跨域请求会失败。

发生跨域时，服务器有没有接到请求并处理响应：（两种情况）

简单请求：
1. 使用的方法是get、post时
2. http头部包含字段（Accept、 Accept-Language 、 Content-Language 、Content-Type（值仅限于 text/plain、multipart/form-data 或 application/x-www-form-urlencoded）

服务器会收到请求并处理该请求返回响应，如果服务器并没有设置跨域的响应头(如Access-Control-Allow-Origin)，浏览器会阻止前端代码访问响应数据，但服务器已经执行了请求逻辑

复杂请求：
1. put、delete等方法
2. 包含自定义的请求头（如 Authorization、X-Custom-Header）、Content-Type 的值是非简单值（如 application/json）

预检请求机制，在发送复杂请求之前，浏览器会自动发起一个OPTIONS预检请求。如果预检请求通过，浏览器会发送实际请求，如果预检失败，浏览器会直接阻止请求发送。

如何解决跨域

我们项目使用的是代理服务器解决跨域问题，跨域问题是存在于浏览器和服务器之间，服务器和服务器之间是不存在跨域问题的。

开发环境通过Vue配置代理服务器。在vue.config.js中添加devServer.proxy配置。将项目dev-api开头的请求转发到项目后台服务器上

module.exports = {devServer: {proxy: {// 代理 `/api` 开头的请求'/dev-api': {target: 'http://example.com', // 目标服务器地址},},},
};

生产环境是通过nginx配置反向代理，在nginx的conf配置文件中配置将prod-api开头的请求转发到项目后台服务器上。

location /prod-api  {proxy_pass https://heimahr-t.itheima.net;
}

使用CORS，服务器设置特定的http响应头，告诉浏览器哪些跨域请求是被允许的。

在服务器端添加以下响应头：
Access-Control-Allow-Origin: 指定允许访问的来源（如 https://example.com 或 *）。
Access-Control-Allow-Methods: 指定允许的请求方法（如 GET, POST, PUT, DELETE）。
Access-Control-Allow-Headers: 指定允许的自定义请求头（如 Content-Type, Authorization）。
Access-Control-Allow-Credentials: 是否允许携带 Cookies。