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

目录

• • 什么是同源策略
  • 什么是跨域
  • • 发生跨域时，服务器有没有接到请求并处理响应：（两种情况）
  • 如何解决跨域

什么是同源策略

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

好处：

什么是跨域

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

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

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

预检请求机制，在发送复杂请求之前，浏览器会自动发起一个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;
}

在服务器端添加以下响应头：
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。

通过 <script> 标签加载数据，因为 <script> 不受同源策略限制。服务器返回的是 JavaScript 代码。

WebSocket 不受同源策略限制，可以用于双向跨域通信。需要服务器验证 Origin 确保安全。