目录
什么是同源策略
概念：
同源策略是浏览器的一种安全机制，用于防止恶意网站对用户的敏感数据进行未经授权的访问。它限制了从一个源加载的脚本对另一个源的资源进行访问。 简单来说，同源策略规定只有当两个页面的协议、域名和端口都相同时，它们才属于同一个源，允许相互访问资源。
好处：
- 保护用户数据安全，不同源的脚本无法访问另一个源的Cookie、LocalStorage、SessionStorage
- 不同源的脚本无法读取或操作另一个源的Dom
- 跨源的XMLHttpRequest或Fetch请求会被浏览器阻止，除非目标服务器允许（使用CORS）
什么是跨域
当一个网页试图访问不同来源的资源（如API、图片、脚本、数据等），就会发生跨域，常说的跨域指的是ajax调用接口时的跨域，浏览器会根据同源策略来判断来源是否一致，如果不一致就认为是跨域请求。如果服务器没有做一些配置，那么跨域请求会失败。
发生跨域时，服务器有没有接到请求并处理响应：（两种情况）
- 简单请求：
- 使用的方法是get、post时
- http头部包含字段（Accept、 Accept-Language 、 Content-Language 、
Content-Type（值仅限于text/plain、multipart/form-data或application/x-www-form-urlencoded）
服务器会收到请求并处理该请求返回响应，如果服务器并没有设置跨域的响应头(如Access-Control-Allow-Origin)，浏览器会阻止前端代码访问响应数据，但服务器已经执行了请求逻辑
- 复杂请求：
- put、delete等方法
- 包含自定义的请求头（如
Authorization、X-Custom-Header） 、Content-Type的值是非简单值（如application/json）
预检请求机制，在发送复杂请求之前，浏览器会自动发起一个OPTIONS预检请求。如果预检请求通过，浏览器会发送实际请求，如果预检失败，浏览器会直接阻止请求发送。
如何解决跨域
- 我们项目使用的是代理服务器解决跨域问题，跨域问题是存在于浏览器和服务器之间，服务器和服务器之间是不存在跨域问题的。
- 开发环境通过Vue配置代理服务器。在vue.config.js中添加devServer.proxy配置。将项目dev-api开头的请求转发到项目后台服务器上
js
module.exports = {
devServer: {
proxy: {
// 代理 `/api` 开头的请求
'/dev-api': {
target: 'http://example.com', // 目标服务器地址
},
},
},
};- 生产环境是通过nginx配置反向代理，在nginx的conf配置文件中配置将prod-api开头的请求转发到项目后台服务器上。
javascript
location /prod-api {
proxy_pass https://heimahr-t.itheima.net;
}- 使用CORS，服务器设置特定的http响应头，告诉浏览器哪些跨域请求是被允许的。
javascript
在服务器端添加以下响应头：
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。- 使用JSONP(仅支持get请求)
通过 <script> 标签加载数据，因为 <script> 不受同源策略限制。服务器返回的是 JavaScript 代码。
- 使用WebSocket
WebSocket 不受同源策略限制，可以用于双向跨域通信。需要服务器验证 Origin 确保安全。