php建网站,有口皆碑的域名备案加急,网络营销招聘岗位有哪些,wordpress简约清爽主题目录 什么是同源策略什么是跨域发生跨域时#xff0c;服务器有没有接到请求并处理响应#xff1a;#xff08;两种情况#xff09; 如何解决跨域 什么是同源策略
概念#xff1a; 同源策略是浏览器的一种安全机制#xff0c;用于防止恶意网站对用户的敏感数据进行未经授… 目录 什么是同源策略什么是跨域发生跨域时服务器有没有接到请求并处理响应两种情况 如何解决跨域 什么是同源策略
概念 同源策略是浏览器的一种安全机制用于防止恶意网站对用户的敏感数据进行未经授权的访问。它限制了从一个源加载的脚本对另一个源的资源进行访问。 简单来说同源策略规定只有当两个页面的协议、域名和端口都相同时它们才属于同一个源允许相互访问资源。
好处
保护用户数据安全不同源的脚本无法访问另一个源的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开头的请求转发到项目后台服务器上
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。使用JSONP(仅支持get请求)
通过 script 标签加载数据因为 script 不受同源策略限制。服务器返回的是 JavaScript 代码。
使用WebSocket
WebSocket 不受同源策略限制可以用于双向跨域通信。需要服务器验证 Origin 确保安全。
