欣赏器同源计谋、跨域、跨域哀求，服务器处置处罚没、跨域办理方案

什么是同源计谋

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

• 掩护用户数据安全，差异源的脚本无法访问另一个源的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开头的哀求转发到项目背景服务器上
  

1. module.exports = {
2.   devServer: {
3.     proxy: {
4.       // 代理 `/api` 开头的请求
5.       '/dev-api': {
6.         target: 'http://example.com', // 目标服务器地址
7.       },
8.     },
9.   },
10. };

复制代码

• 生产环境是通过nginx设置反向署理，在nginx的conf设置文件中设置将prod-api开头的哀求转发到项目背景服务器上。
  

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

复制代码

• 使用CORS，服务器设置特定的http相应头，告诉欣赏器哪些跨域哀求是被允许的。
  

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

复制代码

• 使用JSONP(仅支持get哀求)
  

通过 <script> 标签加载数据，由于 <script> 不受同源计谋限定。服务器返回的是 JavaScript 代码。

• 使用WebSocket
  

WebSocket 不受同源计谋限定，可以用于双向跨域通讯。须要服务器验证 Origin 确保安全。